@import url('./sections/hero.css');
@import url('./sections/content-2-images-links.css');

.content-2-images-links {
    padding-block: 10rem 0;
}

.gallery-section {
    --img-height: 362;

    padding-block: 6rem 3rem;

    .gallery-swiper {
        width: 100%;
    }

    /* Desktop, 5 or fewer images: Swiper not initialised — render as flex row */
    .gallery-swiper:not(.swiper-initialized) .swiper-wrapper {
        display: flex;
        gap: 1rem;
    }

    .gallery-swiper:not(.swiper-initialized) .swiper-slide {
        flex: 1;
        min-width: 0;
        aspect-ratio: 286 / var(--img-height);
    }

    .gallery-swiper:not(.swiper-initialized) .swiper-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* Swiper initialised */
    .gallery-swiper.swiper-initialized .swiper-slide {
        height: calc(var(--img-height) * 1px);
    }

    .gallery-swiper.swiper-initialized .swiper-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
}

.meet-the-designer {
    padding-block: 5rem 8rem;
    background-color: hsl(var(--gold) / 0.05);

    .wrapper {
        display: flex;
        gap: 5.5rem;
        padding-inline: 3rem;
    }

    .meet-the-designer__avatar {
        flex-shrink: 0;
        height: 100%;
        position: relative;

        .deco-img {
            position: absolute;
            bottom: 24px;
            right: 24px;
        }

        .avatar {
            width: 160px;
            height: 160px;
            object-fit: cover;
            border-radius: 100px;
        }
    }

    .meet-the-designer__content {
        flex: 1;
        min-width: 0;
        max-width: 900px;
        padding-block-start: 3rem;
    }
}

@media (max-width: 1023px) {
    .content-2-images-links {
        padding-block: 3.5rem;
    }

    .gallery-section {
        padding-block: 1rem;

        .container {
            padding-inline: 0;
        }

        .gallery-swiper .swiper-slide {
            width: calc(100% - (var(--container-padding) * 3))
        }

        .swiper-button-prev,
        .swiper-button-next {
            display: none;
        }
    }

    .meet-the-designer {
        padding-block: 3.5rem;

        .wrapper {
            flex-direction: column;
            gap: 2.5rem;
            padding-inline: 0;
        }

        .meet-the-designer__avatar {
            .deco-img {
                width: 140px;
                max-height: revert;
                bottom: 0px;
                right: 10px;
            }

            .avatar {
                width: 120px;
                height: 120px;
            }
        }

        .meet-the-designer__content {
            padding-block-start: 0;
        }
    }
}