main {
    background: linear-gradient(to top left,var(--colour-background-success) -20%,#0872b9 120%);
    background-attachment: fixed;
    border-bottom: 3rem solid #f5f5f4;
}

.container.home-cars-overview {
    max-width: 100%;
    padding: 0;
}

@media (width < 30rem) {
    .container.container-xl.home-cars-overview {
        padding: 0;
    }
}

.cars-overview-container {
    margin: 2rem 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (30rem < width) and (width < 48rem) {
    .cars-overview-container {
        margin-left: 1rem;
        margin-right: 1rem;
    }
}

@media (min-width: 52rem) {
    .cars-overview-container {
        grid-template-columns: 1fr 1fr;
    }
}


.cars-simple-overview-container {
}

.ca-card.simple-overview-card {
    --card-bg: transparent;
    --card-padding-x: 1em;
    --card-padding-y: 2rem;
    --content-bg: #fff;
    --header-bg: var(--colour-base-14);
    --header-colour: var(--colour-base-1);
    --header-padding: var(--card-padding-y) var(--card-padding-x);
    --heading-font-size: 1.62rem;
    --content-padding: 0 1rem 10rem;
    --content-padding: 0 1rem calc(var(--footer-bg-height) * 0.5);
    --footer-padding: 0 0 calc(var(--footer-bg-height) * 0.62);
    --container-grid-cols: 1fr;
    --container-grid-rows: auto auto auto;
    --container-gap: 0 2rem;
    --container-margin: 2rem auto;
    --footer-bg-height: 34.413vw;

    & > .header {
        display: grid;
        grid-template-columns: minmax(auto, 91rem);
        justify-content: center;
        grid-template-rows: auto auto;

        & .heading {
            font-size: var(--heading-font-size);
            margin-bottom: 0.38em;
        }

        & .sub-heading {

            line-height: 1.2;
            margin-top: 0.25em;
            font-size: 1.125rem;
            --text-opsz: 18px;
            --letter-spacing: var(--letter-spacing-normal);
        }

        & .heading,
        & .sub-heading {
            /*width: 100%;
            max-width: 91rem;
            margin: 0 auto;
            text-align: left;
            display: block;*/
        }
    }

    & > .content {
        background-image: radial-gradient(farthest-side at 50% 100%, #fff, 62%, var(--colour-base-3));
        background-size: cover;
        background-repeat: no-repeat;
        background-position: 50% 100%;

        & .simple-overview-item-container {
            display: grid;
            grid-template-columns: var(--container-grid-cols);
            grid-template-rows: var(--container-grid-rows);
            /*grid-auto-columns: auto;*/
            gap: var(--container-gap);
            margin: var(--container-margin);
            max-width: 91rem;
        }
    }

    & > .footer {
        position: relative;
    }

    & > .footer::before {
        content: "";
        position: absolute;
        inset: calc( ( var(--footer-bg-height) * 0.5 ) * -1) 0 0;
        height: var(--footer-bg-height);
        background-image: url("/img/home/cars.webp");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: 50% 100%;
    }
}

.simple-overview-item-card {
    --card-bg: transparent;
    --header-colour: #dd472f;
    --card-padding-y: 1rem;
    --card-padding-x: 0;
    --content-padding: 0;
    --header-padding: var(--card-padding-y) 0;
    --content-padding: var(--card-padding-y) var(--card-padding-x);
    --heading-font-size: 2rem;
    position: relative;



    & > .header {
        border-bottom: 1px solid #0006;
        text-align: center;

        & .heading {
            font-size: 2rem;
            font-size: var(--heading-font-size);
        }
    }

    & > .content {
        display: grid;
        /*grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));*/
        /*grid-auto-flow: column;*/
        grid-template-columns: 1fr;
        align-content: start;
        gap: 1rem;
        text-align: center;
        justify-content: center;
    }

    & > .footer {
        text-align: center;
    }
}

.ca-card.simple-overview-item {
    --card-bg: transparent;
    --card-colour: var(--colour-base-14);
    --card-padding-y: 0;
    --card-padding-x: 0;
    --prices-base-font-size: 1rem;
    /*--prices-number-font-size: 3.32rem;*/
    --prices-number-font-size: calc(2.05 * var(--prices-base-font-size));
    color: var(--card-colour);

    & > .content {
        display: grid;
        /*grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));*/
        grid-template-rows: auto auto auto;
        grid-auto-flow: column;
        gap: 0.5rem;
        text-align: center;

        & .title {
            grid-column: 1 / -1;
            grid-row: 1;
        }



        & .price {
            grid-row: 2;
            --fs: 4rem;
            --text-opsz: 32;
            --text-wght: var(--font-weight-normal);
            /*font-size: var(--fs);*/
            font-size: var(--prices-base-font-size);
            font-style: italic;
            line-height: 1;
            display: grid;
            grid-auto-flow: column;
            justify-content: center;
            gap: 0.25em;
            align-items: center;

            & .amount {
                --text-opsz: 28;
                --text-wght: var(--font-weight-bold);
                /*font-size: calc(var(--fs) * 0.62);*/
                line-height: 1;
                font-size: var(--prices-number-font-size);
            }
        }

        & .actions {
            padding: 1rem 0;
            display: grid;
            align-items: center;
            justify-content: center;
        }
    }

    & > .footer {
        text-align: center;
    }
}

.ca-card.overview-card {
    --card-bg: transparent;
    --card-colour: #474f54;
    --header-bg: var(--colour-base);
    --content-bg: var(--colour-base-4);
    --footer-bg: rgba(var(--colour-base-rgb),0.68);
    --header-colour: var(--colour-base-14);
    --card-padding-x: 2rem;
    --card-padding-y: 3rem;
    --content-padding-x: calc(var(--card-padding-x) * 0.62);
    --content-padding: 0.5rem var(--content-padding-x) 27vw;
    --footer-padding: 5.38rem var(--card-padding-x) var(--card-padding-y);
    position: relative;
    background-position: 300% 300%;
    background-repeat: no-repeat;
    box-shadow: var(--elevation-z5);
    container-type: inline-size;

    &::after {
        content: "";
        position: absolute;
        inset: auto 0 11rem;
        translate: 0 50%;
        /*height: 15rem;*/
        aspect-ratio: 2/1;
        background-image: inherit;
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: 90%;
    }

    & > .header .heading {
        --text-wght: 400;
        text-align: center;
        font-size: 2.62rem;

        & span {
            --text-wght: var(--font-weight-bold);
        }
    }

    & > .content {
        display: grid;
        container-type: inline-size;
    }

    & > .footer {
        text-align: center;

        & .pure-button {
            display: inline-flex;
            position: relative;
            z-index: 1;

            &:hover,
            &:focus-visible {

                & .icon {
                    translate: 0.38em 0;
                }
            }
        }
    }

    &.new-used {

        & > .content {
            --content-divider-display: none;
            display: grid;
            /*grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));*/
            grid-template-columns: 1fr;
            gap: 0 2rem;
            position: relative;
            justify-content: stretch;
            container-type: inline-size;

            &::after {
                display: var(--content-divider-display);
                content: "";
                position: absolute;
                inset: 2.1rem 50% 10rem;
                border-left: 1px solid;
                opacity: 0.3;
            }
        }
    }


    @container (width > 35.52rem) {
        --content-padding: 0.5rem var(--content-padding-x) 9rem;

        &::after {
            inset: auto 1.5rem 12rem;
            background-size: contain;
        }

        &.new-used {
            & > .content {
                --content-divider-display: block;
                grid-template-columns: 1fr 1fr;
                container-type: inline-size;
            }
        }
    }
}

@media (min-width: 25rem) {
    .ca-card.overview-card {
        --content-padding-x: calc(var(--card-padding-x) * 1.38);
    }

    .ca-card.simple-overview-card {
        --card-padding-x: 1.5rem;
        --container-grid-cols: 1fr 1fr;
        --container-grid-rows: auto auto;
        --container-gap: 0 2rem;
    }

    .ca-card.simple-overview-item-card {
        --heading-font-size: 1.38rem;

        &.new-used {
            grid-column: span 2;

            & > .content {
                grid-template-columns: 1fr 1fr;
                gap: var(--container-gap);
            }
        }
    }
}

@media (min-width: 48rem) {
    .ca-card.overview-card {
        --content-padding: 0.5rem var(--content-padding-x) 9rem;
    }

    .ca-card.simple-overview-card {
        --card-padding-x: 1.5rem;
        --container-grid-cols: 1fr 1fr 1fr 1fr;
        --container-grid-rows: auto;
        --container-gap: 2rem 2rem;
        --container-margin: 2.62rem auto;
        --content-padding: 0 1rem calc(var(--footer-bg-height) * 0.5);
        --heading-font-size: 2rem;

        & > .header .sub-heading {
            --text-opsz: 21px;
            font-size: var(--fs-3-rem);
        }

        & > .content {
            background-image: url("/img/home/bg.webp");
        }
    }

    .ca-card.simple-overview-item-card {
        /*--header-padding: calc(var(--card-padding-y) * 2.62) 0 var(--card-padding-y);*/
        --content-padding: var(--card-padding-y) var(--card-padding-x) calc(var(--card-padding-y) * 2.62);
        --heading-font-size: 1.38rem;
    }
}

@media (min-width: 52rem) {
    .ca-card.overview-card {
        --content-padding: 0.5rem var(--content-padding-x) 9rem;
    }
}

@media (min-width: 64rem) {
    .ca-card.overview-card {
        --content-padding: 0.5rem var(--content-padding-x) 10rem;

        &::after {
            inset: auto 1.5rem 13rem;
            background-size: contain;
        }
    }

    .ca-card.simple-overview-card {
        --card-padding-x: 2rem;
        --content-padding: 0 var(--card-padding-x) 10rem;
        --footer-padding: 0 0 200px;
        --footer-bg-height: 385px;
        --heading-font-size: 2.38rem;
    }

    .ca-card.simple-overview-item-card {
        --heading-font-size: 2rem;
    }

    .ca-card.simple-overview-item {
        --prices-base-font-size: 1.62rem;
    }
}



.overview-item-card {
    --card-bg: transparent;
    --header-colour: #dd4830;
    --card-padding-y: 1rem;
    --card-padding-x: inherit;
    --content-padding: inherit;
    --header-padding: calc(var(--card-padding-y) * 1.38) 0 var(--card-padding-y);
    --content-padding: 0 0 var(--card-padding-y);
    position: relative;

    &.ca-card {
        --prices-columns: 33% auto;
        --prices-columns: minmax(40%, 1fr) minmax(max-content, 66%);
        --prices-gap: 1rem;
        --prices-base-font-size: 0.875rem;
        --prices-number-font-size: 2.38em;
    }

    & > .content {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    & .heading {
        --text-opsz: 25;
        --text-wght: 700;
        font-size: 2rem;
        white-space: nowrap;
    }

    & .sub-heading {
        --text-opsz: 18;
        color: var(--card-colour);
        font-size: 1.25rem;
        display: block;
        line-height: 1.15;
        text-wrap: auto;
        margin: 0.38em 0 0.62em;
    }

    & .content-item {
        display: grid;
        grid-auto-flow: row;
        gap: 0.25rem;
        grid-template-rows: min-content auto;
        align-content: start;

        & p {
            --text-opsz: 16;
            margin: 0;
            line-height: 1;
            font-size: 0.875rem;
        }

        & .pure-button {
            justify-content: space-between;
            display: inline-flex;
            margin-top: 0.25rem;

            &::before {
                content: "";
                position: absolute;
                inset: 0;
            }
        }
    }

    & .img {
        display: flex;
        justify-content: center;
        align-items: center;

        & img {
            display: block;
            margin: 0;
            width: 200px;
            max-width: 100%;
            height: auto;
        }
    }

    &:has(.overview-description) {
        --prices-columns: min-content auto;
        position: relative;
        --bg: hsl(94.4, 31.9%, 53.9%);
        --shade: hsl(94.4, 31.9%, 21.9%);
    }

    & + .overview-item-card {
        --divider-display: block;
        border-top: none;
        margin-top: 0;

        &::before {
            display: var(--divider-display);
            content: "";
            height: 0.38em;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            margin: 0 calc((var(--content-padding-x) * -1) + 1px) 0;
            background-color: rgba(var(--colour-base-6-rgb), 0.4);
        }
    }

    &.pdi-used > .content {
        grid-template-columns: 1fr;
        gap: 0;
    }

    &.new-used {
        grid-column: 1 / -1;
    }

    &.new-used + .overview-item-card {
        --divider-display: block;
        grid-column: 1 / -1;
    }


    & .prices,
    & .prices-sale {
        display: grid;
        grid-template-columns: var(--prices-columns);
        gap: var(--prices-gap);
    }

    & .content-item > .prices {
        border-bottom: 1px dotted var(--colour-base-10);
        padding-bottom: 1rem;
    }

    & .prices-sale {
        /*display: grid;
        grid-template-columns: 33% auto;
        gap: 1rem;*/
        align-items: center;
        line-height: 1;
        white-space: nowrap;

        & .price-title {
            grid-row: 1;
            grid-column: 1 / -1;
            font-size: 0.875rem;
        }
    }

    & .prices + .actions {
        padding-top: 0.62rem;
    }

    & .price, & .term-length {
        display: grid;
        grid-template-columns: auto auto;
        align-items: center;
        gap: 0.25em;
        line-height: 1;
        white-space: nowrap;
        justify-content: start;
        font-size: var(--prices-base-font-size);
    }

    & .price .amount,
    & .term-length .number {
        --text-opsz: 28;
        --text-wght: 700;
        font-size: var(--prices-number-font-size);
    }

    @container (width < 21rem) {
        &.ca-card {
            --prices-columns: min-content auto;
            --prices-gap: 0.5em;
            --prices-base-font-size: 0.68rem;
        }
    }

    @container (width > 30rem) {


        &.new-used {
            grid-column: 1;
        }

        &.ca-card {
            --prices-columns: min-content auto;
            --prices-gap: 1rem;
            --prices-base-font-size: 1rem;
            --prices-number-font-size: 1.8em;
        }


        &.new-used + .overview-item-card {
            --divider-display: none;
            grid-column: 2;
            margin-top: 0;
        }
    }
}

@media (width > 30rem) {
    .overview-description {
        --text-wght: 370;
        --text-opsz: 25;
        --outset: calc(0.62rem + 1px);
        --font-settings: var(--font-settings-display);
        --letter-spacing: var(--letter-spacing-none);
        position: absolute;
        inset: 1rem calc((var(--content-padding-x) * -1) - var(--outset)) 3rem auto;
        width: 49%;
        padding: 1.125rem 0.62rem 1.125rem 1.38rem;
        background-color: var(--bg);
        color: var(--colour-base);
        box-shadow: var(--elevation-z3);
        display: flex;
        align-items: center;
        font-size: 1.25rem;
        line-height: 1.2;
        text-wrap: balance;
        word-break: keep-all;

        &::after {
            content: "";
            width: 0.62rem;
            height: 1rem;
            clip-path: polygon(100% 0, 0 0, 0 62%);
            background-color: var(--shade);
            position: absolute;
            inset: 100% 0 auto auto;
        }
    }

    .pdi-used .overview-description {
        bottom: auto;
    }
}

@media (width < 30rem) {
    .content:has(.overview-description) {
        grid-template-columns: 1fr;
    }

    .overview-description {
        padding: 1.125rem var(--content-padding-x);
        background-color: var(--bg);
        color: var(--colour-base);
        margin: 0 calc((var(--content-padding-x) * -1) + 1px) 1rem;
    }
}


.pure-button-light, a.pure-button-light {
    --text-wght: 580;
    --button-padding: 0 1.62rem;
    --button-border-radius: calc(var(--button-line-height) * 1rem);
    background-color: var(--colour-base-6);
    background-image: none;
    color: var(--colour-base-15);
    line-height: 3;
    align-items: center;
    border-radius: var(--button-border-radius);
}

.pure-button-light:hover, .pure-button-light:focus-visible,
a.pure-button-light:hover, a.pure-button-light:focus-visible {
    --icon-fill: var(--colour-base);
    background-color: var(--colour-secondary-alt-0);
    color: var(--colour-base);
    background-image: none;

    & .icon {
        translate: 0.38em 0;
    }
}

.term-prices {
    margin: 1.38rem 0 1.5rem;
    padding: 0;
    list-style: none;

    & .term {
        margin: 0;
        /*padding-left: 0.62rem;*/
        display: flex;
        align-items: center;
        gap: 3rem;

        & + .term {
            padding-top: 0.62em;
            margin-top: 0.62em;
            border-top: 1px solid var(--card-divider-colour);
        }
    }

    @container (width < 31.5rem) {
        & .term {
            display: grid;
            grid-auto-flow: row;
            gap: 1rem;
        }
    }
}



.term-length {
    grid-template-columns: 4ch auto;

    & .number {
        display: flex;
        justify-content: center;
    }
}