.intro-section {
    width: 100%;
    overflow: hidden;

    background: #e5d5b8;

    padding:
        clamp(1.4rem, 3vw, 2.5rem)
        0
        clamp(3rem, 6vw, 5rem);
}


.intro-container {
    width: 100%;

    display: flex;
    flex-direction: column;
}


.intro-slider {
    order: 1;

    width: 100%;

    overflow: hidden;
}


.intro-track {
    --visible-slides: 3;
    --slide-gap: clamp(1rem, 1.8vw, 1.8rem);

    display: flex;

    gap: var(--slide-gap);

    width: 100%;

    padding:
        0
        clamp(1rem, 2vw, 2rem);

    transform: translate3d(0, 0, 0);

    transition:
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.4s ease;

    will-change: transform;
}





.intro-slide {
    flex:
        0
        0
        calc(
            (
                100%
                -
                (
                    var(--slide-gap)
                    *
                    (var(--visible-slides) - 1)
                )
            )
            /
            var(--visible-slides)
        );

    min-width: 0;
}


.intro-slide img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: cover;
}


.intro-heading {
    order: 2;

    position: relative;

    width: 100%;

    text-align: center;

    padding:
        clamp(3.5rem, 5vw, 5rem)
        8%
        0;
}


.intro-heading h2 {
    margin:
        0
        0
        clamp(0.6rem, 1vw, 0.9rem);

    color: #111111;

    font-family: 'Big Caslon';

    font-size:
        clamp(1.7rem, 2.3vw, 2.5rem);

    line-height: 1.05;

    font-weight: 400;
}


.intro-heading p {
    width: min(100%, 40rem);

    margin: 0 auto;

    color: #111111;

    font-family: 'Avenir';

    font-size:
        clamp(1rem, 0.95vw, 0.9rem);

    line-height: 1.3;
}


.intro-controls {
    position: absolute;

    left: 50%;
    top: 0.9rem;

    transform: translateX(-50%);

    display: flex;

    align-items: center;
    justify-content: center;

    gap:
        clamp(0.7rem, 1vw, 1rem);
}


.intro-controls button {
    position: relative;

    width:
        clamp(
            2rem,
            3vw,
            2.7rem
        );

    aspect-ratio: 1 / 1;

    padding: 0;

    border: 0.1rem solid #164f82;

    border-radius: 50%;

    background: transparent;

    cursor: pointer;

    transition:
        background-color 0.25s ease,
        transform 0.25s ease;
}


.intro-controls button::before {
    content: "";

    position: absolute;

    top: 50%;

    width: 0.52rem;
    height: 0.52rem;

    border-top: 0.12rem solid #164f82;
    border-right: 0.12rem solid #164f82;
}


.intro-prev::before {
    left: 54%;

    transform:
        translate(-50%, -50%)
        rotate(-135deg);
}


.intro-next::before {
    left: 46%;

    transform:
        translate(-50%, -50%)
        rotate(45deg);
}


.intro-controls button:hover {
    background: rgba(22, 79, 130, 0.1);

    transform: scale(1.07);
}


@media (max-width: 1024px) and (orientation: portrait) {

    .intro-section {
        padding: 0;
    }


    .intro-container {
        display: flex;

        flex-direction: column;
    }


    .intro-heading {
        order: 1;

        padding:
            clamp(2.5rem, 10vw, 4rem)
            12%
            clamp(1.5rem, 6vw, 2.5rem);
    }


    .intro-heading h2 {
        width: min(100%, 20rem);

        margin:
            0
            auto
            clamp(0.8rem, 3vw, 1.2rem);

        font-size:
            clamp(1.75rem, 7vw, 2.5rem);

        line-height: 1.05;
    }


    .intro-heading p {
        width: min(100%, 21rem);

        font-size:
            clamp(0.72rem, 3vw, 0.9rem);

        line-height: 1.35;
    }


    .intro-controls {
        position: relative;

        top: auto;
        left: auto;

        transform: none;

        margin-top:
            clamp(1.5rem, 6vw, 2.3rem);

        gap:
            clamp(1rem, 6vw, 1.5rem);
    }


    .intro-controls button {
        width:
            clamp(
                2.5rem,
                10vw,
                3.1rem
            );
    }


    .intro-controls button::before {
        width:
            clamp(
                0.5rem,
                2vw,
                0.7rem
            );

        height:
            clamp(
                0.5rem,
                2vw,
                0.7rem
            );
    }


    .intro-slider {
        order: 2;
    }


    .intro-track {
        --visible-slides: 1;
        --slide-gap: 0rem;

        padding: 0;
    }


    .intro-slide {
        flex: 0 0 100%;
    }


    .intro-slide img {
        width: 100%;

        height: auto;

        object-fit: cover;
    }

}


@media (max-width: 480px) and (orientation: portrait) {

    .intro-heading {
        padding:
            2.2rem
            11%
            1.5rem;
    }


    .intro-heading h2 {
        max-width: 18rem;

        font-size:
            clamp(
                1.6rem,
                7.5vw,
                2.1rem
            );
    }


    .intro-heading p {
        max-width: 19rem;

        font-size:
            clamp(
                0.8rem,
                3.2vw,
                0.82rem
            );
    }


    .intro-controls {
        margin-top: 1.4rem;
    }

}


@media (max-width: 1024px) and (orientation: landscape) {

    .intro-section {
        padding:
            1.3rem
            0
            3rem;
    }


    .intro-track {
        --visible-slides: 3;

        --slide-gap:
            clamp(
                0.7rem,
                2vw,
                1.3rem
            );

        padding:
            0
            clamp(
                0.7rem,
                2vw,
                1.3rem
            );
    }


    .intro-heading {
        padding-top: 3.8rem;
    }


    .intro-heading h2 {
        font-size:
            clamp(
                1.4rem,
                3vw,
                2rem
            );
    }


    .intro-heading p {
        font-size:
            clamp(
                0.6rem,
                1.3vw,
                0.78rem
            );
    }


    .intro-controls button {
        width:
            clamp(
                1.8rem,
                4vw,
                2.3rem
            );
    }

}