.home {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fff;
}

.home__banners {
    max-height: 480px;
    display: grid;
    grid-template:
        "home__banner-1 home__banner-2 home__banner-4 home__banner-4" 1fr
        "home__banner-1 home__banner-3 home__banner-4 home__banner-4" 1fr / 1fr 1fr 1fr 1fr;
}

.home__banner {
    min-width: 380px;
    position: relative;
    min-height: 240px;
    overflow: hidden;
}

.home__banner:nth-child(1) {
    .home__banner-content {
        height: 100%;
        justify-content: space-between;
    }
}

.home__banner-promo {
    position: absolute;
    bottom: var(--space-s);
    right: var(--space-s);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    color: #fff;
    gap: var(--space-s);
}

.home__banner-content {
    position: relative;
    padding: var(--space-s);
    display: flex;
    gap: var(--space-m);
    z-index: 1;
}

.home__banner-text {
    display: flex;
    flex-direction: column;
}

.home__banner-content--horizontal {
    height: 100%;

    .home__banner-button {
        position: absolute;
        bottom: var(--space-s);
        right: var(--space-s);
        padding: 12px var(--space-s);
    }
}

.home__banner-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.home__banner:hover .home__banner-image {
    transform: scale(1.05);
}

.home__banner-content--vertical {
    flex-direction: column;
}

.home__introduction {
    position: relative;
    width: 100%;
}

.home__introduction-container {
    padding-right: var(--space-2xl);
}

.home__content-decorative-image {
    position: absolute;
    top: var(--space-xs);
    right: 0;
}

.home__benefits {
    width: 100%;
    position: relative;
}

.home__benefits-content {
    max-width: 1200px;
    display: flex;
    padding: 0 var(--space-m) var(--space-2xl);
    margin: 0 auto;
    flex-wrap: wrap;
    row-gap: var(--space-xl);
}

.home__benefits-decorative-image {
    position: absolute;
    left: 0;
    bottom: var(--space-xs);
}

.home__benefits-tile {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.home__benefits-icon {
    width: fit-content;
}

.home__benefits-text {
    width: 50%;
    max-width: 270px;
    font-size: var(--step-2);
    line-height: var(--step-3);
}

.home__dealer-locator {
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: var(--mbv-blue);
    gap: var(--space-3xl);
}

.home__dealer-locator-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    gap: var(--space-m);
}

@media only screen and (max-width: 1200px) {
    .home__banners {
        max-height: 960px;
        grid-template:
            "home__banner-1 home__banner-4" 1fr
            "home__banner-2 home__banner-3" 1fr / 1fr 1fr;
    }

    .home__banner:nth-child(4)::before {
            content: "";
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.3);
            z-index: 1;
            pointer-events: none;
        }
    
    .home__benefits-decorative-image, .home__content-decorative-image {
        display: none;
    }
}

@media only screen and (max-width: 768px) {
    .home__banners {
        max-height: fit-content;
        display: flex;
        flex-direction: column;
    }

    .home__banner-promo {
        gap: var(--space-xl);
    }

    .home__banner-promo-image {
        width: 50%;
        height: auto;
    }

    .home__benefits {
        flex-direction: column;
    }

    .home__benefits-tile {
        width: 100%;
        justify-content: space-between;
    }

    .home__benefits-icon {
        width: fit-content;
    }

    .home__banner-content {
        min-height: 240px;
        justify-content: space-between;
    }

    .home__banner-text {
        max-width: 70%;
    }

    .home__introduction-container {
        padding: var(--space-2xl) var(--space-s);
    }
}

@media only screen and (max-width: 576px) {
    .home__banner-promo-image {
        display: none;
    }
}