/*! Base css: https://assets.codepen.io/573855/lr-codepen-siematic-base.css */
:root {
    --color-bg: #fff;
    --color-light: #f2f2f2;
    --color-dark: #111827;
    --color-dark-brighten: #6b6f78;
    --color-medium-brighten: #cfd1d4;
    --color-jordy-blue: #82abd9;
    --color-transparent: hsla(0, 0%, 100%, 0);
    --text-color: var(--color-dark);
    --button-color: #fff;
    --button-hover-color: var(--color-dark);
    --button-bg-color: var(--color-dark);
    --button-bg-hover-color: var(--color-medium-brighten);
    --swiper-pagination-color: var(--color-dark-brighten);
    --swiper-pagination-active-color: var(--color-dark);
    --spacing: min(max(calc(1.8181818182vw + 0.625rem), 1rem), 2rem);
    --default-spacing-multiplier: 3;
}

/*! Gsap Default Styles */
.viewport-wrapper {
    height: auto;
    overflow: visible;
    position: relative;
}

.content-scroll {
    display: block;
    width: 100%;
}

.content-scroll main {
    min-height: 100lvh;
}

/*! Gsap Styles when using ScrollSmoother */
body:not(.normalize-scroll) .viewport-wrapper {
    bottom: 0;
    height: 100%;
    left: 0;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
}

body:not(.normalize-scroll) .content-scroll {
    overflow: visible;
    will-change: transform;
    /*! Fix Flickering */
}

body:not(.normalize-scroll) .content-scroll [id*=gsap_swiper] .wrapper {
    backface-visibility: hidden;
    transform: scaleZ(1.001);
}

body:not(.normalize-scroll) .content-scroll [id*=gsap_swiper] .swiper-slide {
    backface-visibility: hidden;
    border-left: .0625rem solid transparent;
    border-right: .0625rem solid transparent;
    transform-style: preserve-3d;
}

[id*=gsap_swiper] {
    --column-gap: var(--spacing);
    --thumb-aspect-ratio: 16 / 9;
    --thumb-aspect-ratio-md-down: 4 / 3;
    --md-breakpoint: 48.04875em;
    --max-wrapper-size: 75rem;
    --slides-perview: 2.25;
    --slides-perview-md-down: 1.05;
    --col-width: calc(1 / var(--slides-perview));
    --col-width-md-down: calc(1 / var(--slides-perview-md-down));
    padding-bottom: calc(var(--spacing) * var(--default-spacing-multiplier));
    padding-top: calc(var(--spacing) * var(--default-spacing-multiplier));
}

[id*=gsap_swiper][data-scrub] {
    --pin-spacer-bg-color: var(--bg-color, var(--color-bg));
}

[id*=gsap_swiper][data-scrub] .swiper-navigation-container,
[id*=gsap_swiper][data-scrub] .swiper-pagination-container {
    display: none;
}

[id*=gsap_swiper][data-scrub] [class*=pin-spacer]:before {
    background-color: var(--pin-spacer-bg-color, transparent);
    content: "";
    display: block;
    height: 100%;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
}

[id*=gsap_swiper_01] {
    --bg-color: #FAF2E7;
    background-color: var(--bg-color);
}

/*! Swiper Heading */
.text-before-wrapper {
    margin-left: var(--swiper-text-before-margin-left, 0);
    max-width: var(--swiper-text-before-width, 100%);
    padding: 0 var(--spacing) calc(var(--spacing) * var(--default-spacing-multiplier) * .5) 0;
    width: 100%;
}

.text-before-wrapper h2 {
    line-height: 1.1em;
}

/*! Swiper */
.swiper-column-gap {
    border: 0;
    height: .0625rem;
    margin: -.0625rem calc(-1 * var(--column-gap));
    overflow: hidden;
    padding: 0;
    pointer-events: none;
    position: absolute;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: var(--column-gap);
}

.media-container {
    aspect-ratio: var(--thumb-aspect-ratio);
    width: 100%;
}

.media-container picture {
    display: block;
    width: 100%;
    height: 100%;
}

.swiper-slide {
    min-width: 0;
    width: calc((var(--max-wrapper-size) - var(--column-gap) * (var(--slides-perview) + 1)) * var(--col-width));
    height: auto;
}

.card-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/*! Swiper Navigation  */
.swiper-navigation-container {
    display: block;
    height: var(--swiper-navigation-height, 100%);
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}

.swiper-navigation-wrapper {
    display: flex;
    flex-wrap: nowrap;
    height: 100%;
    pointer-events: none;
    position: relative;
    width: 100%;
}

.swiper-prev {
    margin-right: auto;
}

.swiper-prev.hide {
    transform: translate3d(-100%, 0, 0);
}

.swiper-next {
    margin-left: auto;
}

.swiper-next.hide {
    transform: translate3d(100%, 0, 0);
}

.swiper-next,
.swiper-prev {
    color: var(--color-light);
    cursor: pointer;
    display: block;
    margin-bottom: auto;
    margin-top: auto;
    padding: calc(var(--spacing) * .25);
    pointer-events: auto;
    transition: transform .6s cubic-bezier(0, 0, 0, 1);
}

.swiper-next:before,
.swiper-prev:before {
    background-color: var(--color-dark);
    content: "";
    height: 100%;
    left: 0;
    opacity: .5;
    position: absolute;
    top: 0;
    width: 100%;
}

.swiper-next svg,
.swiper-prev svg {
    height: 1.5rem;
    margin: auto;
    pointer-events: none;
    position: relative;
    width: 1.5rem;
}

/*! Swiper Pagination  */
.swiper-pagination-container {
    display: block;
    margin-top: calc(var(--spacing) * var(--default-spacing-multiplier) * .5);
    min-height: calc(var(--spacing) * var(--default-spacing-multiplier) * .5);
    pointer-events: none;
    position: relative;
}

.swiper-pagination-wrapper {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    pointer-events: none;
    position: relative;
}

.swiper-pagination {
    pointer-events: auto;
    position: relative;
}

.swiper-pagination .swiper-pagination-bullet {
    background-color: var(--swiper-pagination-color);
    height: .75rem;
    opacity: 1;
    position: relative;
    width: .75rem;
}

.swiper-pagination .swiper-pagination-bullet:after {
    content: "";
    height: 1.375rem;
    left: 50%;
    pointer-events: auto;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 1.375rem;
}

.swiper-pagination .swiper-pagination-bullet+.swiper-pagination-bullet {
    margin-left: 1rem;
}

.swiper-pagination .swiper-pagination-bullet-active {
    background: var(--swiper-pagination-active-color);
    pointer-events: none;
}

/*! Card */
.card-container *+.card-text-content {
    padding-top: var(--spacing);
}

.card-text-content {
    padding-bottom: .0625rem;
    word-wrap: break-word;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.card-text-content .button {
    --radius: 1.5rem;
    background-color: transparent;
    border: 1px solid var(--button-bg-color);
    border-radius: max(.0625rem, min(var(--radius), (100vw - var(--radius) - 100%) * 9999))/var(--radius);
    color: var(--button-bg-color);
    display: block;
    min-height: 1rem;
    padding: .5rem 1.25rem;
    transition: color .4s ease-out, background .4s ease-out;
    width: max-content;
}

.card-text-content .button:active {
    background-color: var(--button-bg-color);
    color: var(--button-color);
}

.card-text-content .title+p {
    margin-top: calc(var(--spacing) * .5);
}

.card-text-content *+.button {
    margin-top: auto;
}

.dummy-block {
    align-items: center;
    display: grid;
    height: 100lvh;
    justify-items: center;
    place-items: center;
    text-align: center;
}

@media (max-width:48.04875em) {
    .text-before-wrapper {
        margin-left: 0;
        max-width: 100%;
        padding: 0 var(--spacing) calc(var(--spacing) * var(--default-spacing-multiplier) * .5) var(--spacing);
    }

    .swiper-slide {
        width: calc((100% - var(--column-gap) * (var(--slides-perview-md-down) + 1)) * var(--col-width-md-down));
    }

    .swiper-navigation-container {
        display: none;
    }
}

@media (hover:hover) and (pointer:fine) {
    .card-text-content .button:hover {
        background-color: var(--button-bg-color);
        color: var(--button-color);
    }
}