.points-section {
    position: relative;

    width: 100%;

    padding:
        clamp(3rem, 6vw, 5rem)
        5%
        clamp(3rem, 6vw, 5rem);

    background-image:
        url("../images/point-bg-desktop.png");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    overflow: hidden;
}


.points-container {
    width: min(100%, 75rem);

    margin: 0 auto;
}


/* HEADING */

.points-heading {
    width: 100%;

    text-align: center;

    margin-bottom:
        clamp(2rem, 3vw, 3.5rem);
}


.points-heading h2 {
    margin:
        0
        0
        1rem;

    color: #111111;

    font-family: "Big Caslon";

    font-size:
        clamp(
            2rem,
            2.5vw,
            2.8rem
        );

    line-height: 1.05;

    font-weight: 400;
}


.points-heading p {
    margin: 0 auto;

    color: #111111;

    font-family: "Avenir";

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

    line-height: 1.35;
}


/* CONTROLS */

.points-controls {
    display: none;
}


/* SLIDER */

.points-slider {
    width: 100%;
}


.points-track {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    column-gap:
        clamp(
            1.5rem,
            3vw,
            3rem
        );

    row-gap:
        clamp(
            2rem,
            3vw,
            3.5rem
        );

    align-items: start;
}


/* ITEM */

.points-item {
    width: 100%;

    display: flex;

    justify-content: center;
}


.points-item img {
    display: block;

    width: 100%;

    height: auto;

    object-fit: contain;
}



/* =========================================================
   MOBILE PORTRAIT
   AOS FLIP DISABLED HERE
   JAVASCRIPT FADE CONTROLS THE SLIDES
========================================================= */

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

    .points-section {
        padding:
            clamp(3rem, 10vw, 5rem)
            6%
            clamp(3rem, 10vw, 5rem);

        background-image:
            url("../images/point-bg-mobile.png");

        background-position:
            center top;
    }


    .points-container {
        width: 100%;
    }


    /* HEADING */

    .points-heading {
        margin-bottom:
            clamp(
                1.5rem,
                6vw,
                2.5rem
            );
    }


    .points-heading h2 {
        max-width: 20rem;

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

        font-size:
            clamp(
                1.8rem,
                7vw,
                2.6rem
            );

        line-height: 1.08;
    }


    .points-heading p {
        max-width: 23rem;

        font-size:
            clamp(
                0.72rem,
                3.1vw,
                0.95rem
            );

        line-height: 1.35;
    }


    .points-heading p br {
        display: none;
    }


    /* CONTROLS */

    .points-controls {
        display: flex;

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

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

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


    .points-controls button {
        position: relative;

        width:
            clamp(
                2.5rem,
                10vw,
                3.1rem
            );

        aspect-ratio: 1 / 1;

        padding: 0;

        border:
            0.12rem solid
            #25527a;

        border-radius: 50%;

        background: transparent;

        cursor: pointer;

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


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

        position: absolute;

        top: 50%;

        width: 0.65rem;
        height: 0.65rem;

        border-top:
            0.13rem solid
            #25527a;

        border-right:
            0.13rem solid
            #25527a;
    }


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

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


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

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


    .points-controls button:hover {
        background:
            rgba(
                37,
                82,
                122,
                0.08
            );
    }


    .points-controls button:active {
        transform: scale(0.92);
    }


    /* SLIDER */

    .points-slider {
        position: relative;

        width: 100%;

        overflow: hidden;
    }


    .points-track {
        position: relative;

        width: 100%;

        max-width: 28rem;

        margin: 0 auto;

        display: grid;

        grid-template-columns: 1fr;

        gap: 0;
    }


    /*
        IMPORTANT

        All slides use same grid cell.
        This allows one item to fade
        over the other.
    */

    .points-item {
        grid-area: 1 / 1;

        position: relative;

        width: 100%;

        display: flex;

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

        z-index: 1;
    }


    /*
        OVERRIDE AOS FLIP-LEFT ON PORTRAIT ONLY

        AOS normally controls:
        opacity
        transform
        transition

        We take control of those here.
    */

    .points-item[data-aos],
    .points-item[data-aos="flip-left"],
    .points-item[data-aos="flip-left"].aos-animate {

        transform: none !important;

        -webkit-transform: none !important;

        perspective: none !important;

        -webkit-perspective: none !important;

        backface-visibility: visible !important;

        -webkit-backface-visibility: visible !important;

        opacity: 0 !important;

        visibility: hidden !important;

        pointer-events: none;

        z-index: 1;

        will-change: opacity;

        transition:
            opacity 1s ease,
            visibility 0s linear 1s
            !important;
    }


    /*
        ACTIVE MOBILE SLIDE
    */

    .points-item.active,
    .points-item[data-aos].active,
    .points-item[data-aos="flip-left"].active,
    .points-item[data-aos="flip-left"].active.aos-animate {

        opacity: 1 !important;

        visibility: visible !important;

        pointer-events: auto;

        transform: none !important;

        -webkit-transform: none !important;

        z-index: 2;

        transition:
            opacity 1s ease,
            visibility 0s linear 0s
            !important;
    }


    /*
        AOS sometimes applies additional
        transform properties.

        Force all of them off for the
        mobile slider.
    */

    .points-item[data-aos] {
        transform-origin: center !important;
    }


    .points-item img {
        display: block;

        width: 100%;

        max-width: 25rem;

        height: auto;

        margin: 0 auto;

        object-fit: contain;
    }

}



/* =========================================================
   SMALL MOBILE
========================================================= */

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

    .points-section {
        padding:
            3rem
            6%
            3.5rem;
    }


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

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


    .points-heading p {
        max-width: 20rem;

        font-size:
            clamp(
                0.72rem,
                3.4vw,
                0.85rem
            );
    }


    .points-controls {
        margin-top: 1.5rem;
    }


    .points-track {
        max-width: 24rem;
    }


    .points-item img {
        max-width: 22rem;
    }

}



/* =========================================================
   MOBILE / TABLET LANDSCAPE
   NORMAL DESKTOP GRID
   AOS FLIP-LEFT REMAINS ACTIVE
========================================================= */

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

    .points-section {
        padding:
            clamp(
                2.5rem,
                7vh,
                4rem
            )
            5%
            clamp(
                2.5rem,
                7vh,
                4rem
            );

        background-image:
            url("../images/point-bg-desktop.png");
    }


    .points-heading {
        margin-bottom: 2rem;
    }


    .points-heading h2 {
        font-size:
            clamp(
                1.5rem,
                3vw,
                2.2rem
            );
    }


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


    .points-controls {
        display: none;
    }


    .points-slider {
        overflow: visible;
    }


    .points-track {
        width: 100%;

        max-width: none;

        display: grid;

        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

        gap:
            clamp(
                1rem,
                3vw,
                2rem
            );
    }


    /*
        Do NOT override opacity or transform here.

        This allows:
        data-aos="flip-left"

        to continue working in landscape.
    */

    .points-item {
        position: relative;

        grid-area: auto;

        width: 100%;

        display: flex;

        justify-content: center;

        pointer-events: auto;

        z-index: auto;
    }


    .points-item img {
        width: 100%;

        max-width: none;

        height: auto;
    }

}