#mainCarousel {
    .carousel-inner, .carousel-item {
        aspect-ratio: 8/3;
    }
}

.products-slider {
    .category-button {
        background-color: #F5F5F5;
        color: var(--second-color);
        cursor: pointer;

        &.active {
            background-color: #142648;
            color: #FFFFFF;
            cursor: default;
        }
    }

    .items {
        display: grid;
        grid-gap: .5rem;
        grid-auto-columns: calc((100% - (4 * .5rem)) / 5);
        grid-auto-flow: column;
    }
}

#second-middle-banner {
    aspect-ratio: 1920/750;
    background: var(--landscape-bg) no-repeat center fixed;
    background-size: 100% 100%;

    .container {
        z-index: 1;
    }
}

#popup-banner {
    background: transparent;
    width: clamp(550px, 60%, 100%);
    transition: 500ms;

    img {
        aspect-ratio: 1.5/1;
        width: 100%;
    }

    &::-webkit-backdrop {
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
    }

    &::backdrop {
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
    }

    @starting-style {
        translate: 0 100%;
        opacity: 0;
    }
}

@media (orientation: portrait) {
    #mainCarousel {
        .carousel-inner, .carousel-item {
            aspect-ratio: 2/1;
        }
    }

    #second-middle-banner {
        aspect-ratio: 4/3;
        background: var(--portrait-bg) no-repeat center fixed;
        background-size: 100% 100%;
    }
}

@media (max-width: 576px) {
    #popup-banner {
        margin-top: auto;
        margin-bottom: unset;
        max-width: unset;
        width: 100%;
    }

    .products-slider {
        .items {
            grid-auto-columns: calc((100% - .5rem) / 2);
        }
    }
}