#main__container:has(.banner-bento) {
    margin-top: 0;
}

.banner-bento {
    --row-height: 20rem;
    --row-height--mobile: 15rem;
    --gap: 1.5rem;

    padding: var(--gap);
    max-width: calc(1722px + (2 * var(--gap)));
    margin: 0 auto;
    display: grid;
    gap: var(--gap);

    &.banner-bento--tablet,
    &.banner-bento--mobile {
        display: none;
    }

    &.banner-bento--one {
        grid-template-columns: 1fr;
        grid-template-rows: calc(2 * var(--row-height) + var(--gap));
        grid-template-areas: "a";
    }

    &.banner-bento--two {
        grid-template-columns: 3fr 2fr;
        grid-template-rows: repeat(2, var(--row-height));
        grid-template-areas:
            "a b"
            "a b";
    }

    &.banner-bento--three {
        grid-template-columns: 3fr 2fr;
        grid-template-rows:
            calc(2 * var(--row-height) * 0.6)
            calc(2 * var(--row-height) * 0.4);
        grid-template-areas:
            "a b"
            "a c";
    }

    &.banner-bento--four {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, var(--row-height));
        grid-template-areas:
            "a a b"
            "c d b";
    }

    &.banner-bento--five {
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows:
            calc(2 * var(--row-height) * 0.6)
            calc(2 * var(--row-height) * 0.4);
        grid-template-areas:
            "b b a a a"
            "b b c d e";
    }

    & > .banner-bento-banner {
        &:nth-of-type(1) {
            grid-area: a;
        }

        &:nth-of-type(2) {
            grid-area: b;
        }

        &:nth-of-type(3) {
            grid-area: c;
        }

        &:nth-of-type(4) {
            grid-area: d;
        }

        &:nth-of-type(5) {
            grid-area: e;
        }
    }

    & > .banner-bento-carousel {
        grid-area: b;
    }
}

.banner-bento-banner {
    width: 100%;
    height: 100%;
    display: block;
    background-size: cover;
    background-position: center;
    text-decoration: none;

    &.banner-bento-banner--normal {
        .banner-bento-banner__overlay {
            justify-content: center;
            align-items: flex-start;
            background-image: linear-gradient(90deg, color-mix(in oklab, var(--clr-gray-950), transparent 70%), transparent),
            linear-gradient(45deg, color-mix(in oklab, var(--clr-gray-950), transparent 70%), transparent);
        }
    }

    &.banner-bento-banner--image {
        background-position: center top;
    }

    &.banner-bento-banner--image-button {
        background-position: center top;

        .banner-bento-banner__overlay {
            justify-content: flex-end;
            align-items: stretch;
        }
    }

    &.banner-bento-banner--logo {
        .banner-bento-banner__overlay {
            justify-content: space-between;
            align-items: flex-start;
            background-image: linear-gradient(90deg, color-mix(in oklab, var(--clr-gray-950), transparent 70%), transparent),
            linear-gradient(45deg, color-mix(in oklab, var(--clr-gray-950), transparent 70%), transparent);
            gap: 0.75rem;
        }

        .banner-bento-banner__title {
            font-size: var(--fs-xl);
        }
    }

    .banner-bento-banner__overlay {
        width: 100%;
        height: 100%;
        padding: 2rem;
        color: var(--clr-gray-0);
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .banner-bento-banner__title {
        font-size: var(--fs-4xl);
        font-weight: bold;
    }

    .banner-bento-banner__description {
        font-size: var(--fs-xl);
        margin-bottom: 1.5rem;
    }

    .banner-bento-banner__button {
        --padding-vertical: 1rem;
        --pading-horizonstal: 2rem;
        font-size: var(--fs-md);
    }

    .banner-bento-banner__logo {
        display: block;
        height: 3rem;
    }

    .banner-bento-banner__separator {
        flex: 1;
    }
}

.banner-bento-carousel {
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .banner-bento-carousel__wrapper {
        flex: 1;
    }

    .banner-bento-carousel__pagination {
        margin-top: 1rem;
        width: 100%;
        height: 0.375rem;
        display: flex;
        gap: 1rem;

        .banner-bento-carousel__pagination__indicator {
            flex: 1;
            height: 100%;
            background-color: var(--clr-gray-700);
            transition: background-color var(--transition-duration) ease-in-out;

            &.banner-bento-carousel__pagination__indicator--active {
                background-color: var(--clr-primary);
            }
        }
    }
}

@media screen and (max-width: 1600px) {
    .banner-bento {
        &.banner-bento--five {
            grid-template-columns: repeat(9, 1fr);
            grid-template-areas:
                "a a a a a b b b b"
                "c c c d d d e e e";
        }
    }
}

@media screen and (max-width: 1024px) {
    .banner-bento {
        &.banner-bento--tablet {
            display: grid;
        }

        &.banner-bento--desktop,
        &.banner-bento--mobile {
            display: none;
        }

        &.banner-bento--two {
            grid-template-columns: 1fr;
            grid-template-rows: repeat(3, var(--row-height));
            grid-template-areas:
                "a a"
                "a a"
                "b b";
        }

        &.banner-bento--three {
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(3, var(--row-height));
            grid-template-areas:
                "a a"
                "a a"
                "b c";
        }

        &.banner-bento--four,
        &.banner-bento--five {
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(3, var(--row-height));
            grid-template-areas:
                "a a"
                "b b"
                "c c";
        }

        & > .banner-bento-carousel {
            grid-area: c;
        }
    }
}

@media screen and (max-width: 576px) {
    .banner-bento {
        --gap: 1rem;

        &.banner-bento--mobile {
            display: grid;
        }

        &.banner-bento--desktop,
        &.banner-bento--tablet {
            display: none;
        }

        &.banner-bento--one {
            grid-template-rows: repeat(1, var(--row-height));
        }

        &.banner-bento--two,
        &.banner-bento--four,
        &.banner-bento--five {
            grid-template-columns: 1fr;
            grid-template-rows: var(--row-height) var(--row-height--mobile);
            grid-template-areas:
                "a a"
                "b b";
        }

        &.banner-bento--four,
        &.banner-bento--five {
            grid-template-rows: repeat(2, var(--row-height));
        }

        &.banner-bento--three {
            grid-template-columns: 1fr;
            grid-template-rows: var(--row-height) repeat(2, var(--row-height--mobile));
            grid-template-areas:
                "a a"
                "b b"
                "c c";
        }

        & > .banner-bento-carousel {
            grid-area: b;
        }
    }

    .banner-bento-banner {
        &.banner-bento-banner--normal {
            .banner-bento-banner__overlay {
                justify-content: flex-end;
                align-items: stretch;
            }
        }

        .banner-bento-banner__overlay {
            padding: 1rem;
        }

        .banner-bento-banner__title {
            font-size: var(--fs-xl);
        }

        .banner-bento-banner__description {
            font-size: var(--fs-md);
        }
    }
}