.gallery-carousel{
    max-width: 100%;
    margin: var(--block-margin) 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: var(--column-gap);
    row-gap: var(--row-gap);
    align-items: center;
}

.gallery-carousel-intro.animate__animated{
    animation-name: fadeInUp;
}

.gallery-carousel-intro h2{
    margin-bottom: var(--item-row-gap);
}

.gallery-carousel-intro > *:last-child{
    margin-bottom: 0;
}

.gallery-carousel-swiper.animate__animated {
    animation-name: fadeInUp;
    animation-delay: 0.5s;
}

.gallery-carousel-swiper .swiper-wrapper{
    align-items: center;
}

.gallery-carousel-swiper-card{
    width: 100%;
    padding-right: var(--item-row-gap);
    max-width: calc(min(40rem, 70vw));
    text-decoration: none;
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: calc(var(--item-row-gap) / 2);
    transition: 0.3s ease all;
}

.gallery-carousel-swiper-card:not(.swiper-slide-visible) {
    opacity: 0;
}

.gallery-carousel-swiper-card:is(.swiper-slide-visible) {
    opacity: 1;
    transition: none;
}

.gallery-carousel-swiper-card:is(:hover, :focus, :active){
    text-decoration: none;
}

.gallery-carousel-swiper-card-image{
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
    transition: all 0.3s ease;
    overflow: hidden;
}

.gallery-carousel-swiper-card-image img{
    transition: all 0.15s ease-in-out;
    object-fit: cover;
    border-radius: 5rem;
    max-width: min(calc(min(40rem, 70vw) - (var(--page-padding) * 2)), 100%);
    max-height: 40rem;
}

.gallery-carousel-swiper-card span{
    display: block;
    text-align: center;
    font: var(--font-headline-4);
    line-height: 1.5;
}

.gallery-carousel-swiper-navigation{
    position: relative;
    margin: var(--row-gap) 0 0;
    width: 100%;
    display: flex;
    justify-content: center;
    column-gap: var(--item-column-gap);
    padding: 0 var(--page-padding);
    z-index: 2;
}

.gallery-carousel-swiper-navigation button{
    border-radius: 50%;
    border: 0.01rem solid var(--color-brown);
}

.gallery-carousel-swiper-navigation button:is(:hover, :focus){
    outline: none;
}

.gallery-carousel-swiper-navigation button svg *{
    transition: all 0.3s ease;
}

.gallery-carousel-swiper-navigation button svg rect{
    fill: var(--background-color);
}

.gallery-carousel-swiper-navigation button svg path{
    stroke: var(--text-color);
}

.gallery-carousel-swiper-navigation button:is(:hover, :focus) svg rect{
    fill: var(--text-color);
}

.gallery-carousel-swiper-navigation button:is(:hover, :focus) svg path{
    stroke: var(--background-color);
}

@media (max-width: 991px){
    .gallery-carousel-intro{
        text-align: center;
        max-width: var(--wide-width);
        margin: 0 auto;
    }

    .gallery-carousel-swiper-card{
        transition: opacity 0.3s ease;
    }

    .gallery-carousel-swiper-card:not(.swiper-slide-active){
        opacity: 0.7;
    }
}

@media (min-width: 992px){
    .gallery-carousel{
        --intro-width: ((var(--wide-width) - (var(--page-padding)*2)) * 0.35);
        grid-template-columns: calc(((100% - var(--wide-width) - (var(--page-padding)*2)) / 2) + var(--intro-width)) minmax(0, auto);
        overflow: hidden;
    }

    .gallery-carousel-intro{
        max-width: calc(var(--intro-width) - var(--page-padding));
        justify-self: end;
        position: relative;
        z-index: 2;
    }

    .gallery-carousel-intro.animate__animated{
        animation-name: fadeInLeft;
    }

    .gallery-carousel-intro p{
        max-width: 38rem;
    }

    .gallery-carousel-swiper{
        width: calc(100% + 40rem);
        margin-left: -40rem;
    }

    .gallery-carousel-swiper.animate__animated {
        animation-name: fadeInRight;
        animation-delay: 0.5s;
    }

    .gallery-carousel-swiper .swiper-wrapper{
        padding-left: 40rem;
    }

    .gallery-carousel-swiper-card{
        width: 40rem;
        height: 40rem;
        max-height: 80vw;
        padding: 0;
    }

    .gallery-carousel-swiper-card.swiper-slide-prev{
        opacity: 0;
        transition: all 0.3s ease;
    }

    .gallery-carousel-swiper-card-image{
        padding: 0 calc(var(--item-column-gap) / 2);
    }

    .gallery-carousel-swiper-navigation{
        justify-content: flex-start;
        padding: 0;
    }
}