.featured3up {
    margin: 64px auto 0;

    @media (min-width: $content-max) {
        max-width: 1800px;
        margin: 0 auto;
    }
    &__header {
        color: $color-green-dark;
        text-align: center;
        span {
            font-family: $font-handwriting;
            @include fontsize(18px);
            font-weight: 400;
            line-height: .9;

            @media (min-width: $break-medium) {
                @include fontsize(28px);
            }

            @media (min-width: $break-large) {
                @include fontsize(36px);
            }
        }
        .decorative-lines {
            position: relative;
            &:before {
                content: '';
                position: absolute;
                width: calc(50% - 90px);
                height: 2px;
                left: 0;
                top: 50%;
                background-color: $color-green-dark;
                border-radius: 8px;
                transform: scaleX(0);
                transform-origin: right;
                transition: all .3s ease .5s;

                @media (min-width: $break-medium) {
                    width: calc(50% - 150px);
                }

                @media (min-width: $break-large) {
                    width: calc(50% - 190px);
                    left: -3px;  
                    height: 3px;
                }
            }
            &:after {
                content: '';
                position: absolute;
                width: calc(50% - 90px);
                height: 2px;
                right: 0;
                top: 50%;
                background-color: $color-green-dark;
                border-radius: 8px;
                transform: scaleX(0);
                transform-origin: right;
                transition: all .3s .2s ease;

                @media (min-width: $break-medium) {
                    width: calc(50% - 150px);
                }

                @media (min-width: $break-large) {
                    width: calc(50% - 200px);
                    height: 3px;
                }
            }
        }
        .circle {
            &:after {
                content: '';
                position: absolute;
                width: 10px;
                height: 10px;
                border-radius: 50%;
                border: 2px solid $color-green-dark;
                background-color: $color-white;
                right: 0;
                top: calc(50% - 7px);
                z-index: 1;
                opacity: 0;
                transition: opacity .3s ease;

                @media (min-width: $break-medium) {
                    width: 15px;
                    height: 15px;
                }

                @media (min-width: $break-large) {
                    width: 18px;
                    height: 18px;
                    border: 3px solid $color-green-dark;
                    top: calc(50% - 11px);
                }
            }
        }

        @media (min-width: $break-medium) {
            h2 {
                margin-bottom: 12px;
            }
        }

        @media (min-width: $break-large) {
            h2 {
                margin-bottom: 24px;
            }
        }
    }
    &__intro {
        @include fontsize(18px);
        color: $color-green-dark;
        font-family: $font-acumen-cond;
        font-style: italic;
        font-weight: 800;
        line-height: 1.4;
        padding: 20px;
        border: 2px solid $color-green-dark;
        border-radius: 8px;
        margin: 16px 16px 32px;
        position: relative;
        background-color: $color-white;

        @media (min-width: $break-medium) {
            @include fontsize(21px);
            padding: 48px;
            margin: 18px 20px;
        }

        @media (min-width: $break-large) {
            @include fontsize(32px);
            margin: 44px 80px 60px;
            padding: 64px;
            border: 3px solid $color-green-dark;
        }

        &:before {
            content: '';
            position: absolute;
            width: 2px;
            height: calc(50% + 30px);
            left: -18px;
            top: -29px;
            background-color: $color-green-dark;
            border-radius: 0;
            transform: scaleY(0);
            transform-origin: top;
            transition: all .3s ease .7s;

            @media (min-width: $break-medium) {
                height: calc(50% + 35px);
                top: -33px;
                left: -22px;
            }

            @media (min-width: $break-large) {
                height: calc(50% + 63px);
                top: -63px;
                left: -86px;
                width: 3px;
            }
        }
        &:after {
            content: '';
            position: absolute;
            width: calc(100vw - 30px);
            height: 2px;
            left: -18px;
            top: 50%;
            background-color: $color-green-dark;
            border-radius: 0;
            transform: scaleX(0);
            transform-origin: left;
            transition: all .5s ease 1s;
            z-index: -1;

            @media (min-width: $break-medium) {
                left: -20px;
                width: calc(100vw - 104px);
            }

            @media (min-width: $break-large) {
                left: -86px;
                width: calc(100% + 163px);
                height: 3px;
                max-width: 1620px;
            }
        }
        .decorative-lines:before {
            content: '';
            position: absolute;
            width: 2px;
            height: calc(50% + 110px);
            right: -20px;
            top: 50%;
            background-color: $color-green-dark;
            border-radius: 0;
            transform: scaleY(0);
            transform-origin: top;
            transition: all .3s ease 1.5s;

            @media (min-width: $break-medium) {
                height: calc(50% + 160px);
                right: -22px;
            }

            @media (min-width: $break-large) {
                height: calc(50% + 283px);
                right: -80px;
                width: 3px;
            }
        }
    }

    .column--three {
        position: relative;
        &:before {
            content: '';
            position: absolute;
            top: calc(110px - 36px);
            right: 0;
            height: 2px;
            width: 100%;
            background-color: $color-green-dark;
            transform: scaleY(0);
            transform-origin: right;
            transition: all .3s ease 1.8s;
            z-index: -1;

            @media (min-width: $break-medium) {
                top: 140px;
            }

            @media (min-width: $break-large) {
                top: 220px;
                height: 3px;
                right: 3px;
                width: calc(100% - 14px);
            }
        }
        &:after {
            content: '';
            position: absolute;
            top: 68px;
            left: -8px;
            height: 10px;
            width: 10px;
            background-color: $color-white;
            border: 2px solid $color-green-dark;
            border-radius: 50%;
            opacity: 0;
            transition: opacity .5s ease 2.1s;
            z-index: -1;

            @media (min-width: $break-medium) {
                top: 132px;
                height: 15px;
                width: 15px;
            }

            @media (min-width: $break-large) {
                top: 209px;
                width: 18px;
                height: 18px;
                border: 3px solid $color-green-dark;
            }
        }

        @media (min-width: $break-medium) {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 7px;
            padding: 0 20px;
        }

        @media (min-width: $break-large) {
            padding: 0 80px;
            gap: 20px;
        }
    }

    &__item {
        padding: 0 15px;
        position: relative;

        &:hover {
            img {
                transform: scale(1.05);
            }
        }

        @media (min-width: $break-medium) {
            display: flex;
            flex-direction: column;
            padding: 0;
        }
    }

    &__image {
        overflow: hidden;
        border-radius: 8px 8px 0 0;
        img {
            aspect-ratio: 260/140;
            object-fit: cover;
            transition: all 300ms;

            @media (min-width: $break-medium) {
                aspect-ratio: 179/179;
            }
        }
    }

    &__caption {
        @include fontsize(16px);
        font-weight: 600;
        line-height: 1.4;
        h3 {
            @extend h5;
            margin: 0;
        }

        @media (min-width: $break-medium) {
            @include fontsize(18px);
        }

        @media (min-width: $break-large) {
            @include fontsize(24px);
            line-height: 1.3;
            h5 {
                margin: 0 0 16px;
            }
        }
    }

    &__content {
        padding: 10px 16px 24px;
        border-top: 2px solid $color-green-light;
        background-color: $color-green-dark;
        color: $color-white;
        border-radius: 0 0 8px 8px;

        @media (min-width: $break-medium) {
            padding: 24px 24px 13px;
            flex: 1;
        }

        @media (min-width: $break-large) {
            padding: 24px 24px 32px;
        }
    }

    &__cta {
        span.last-word{
            position: relative;
            padding-right: 0;
            &:after {
                content: '';
                position: absolute;
                top: calc(50% - 3px);
                right: -23px;
                width: 14px;
                height: 10px;
                transition: all .3s ease;
                background-image: url("data:image/svg+xml,%3Csvg width='14' height='10' viewBox='0 0 14 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.56369 0L14 5.02381L9.56369 10H7.55732L11.1911 5.90476H0V4.11905H11.1911L7.55732 0H9.56369Z' fill='%23A4FFBF'/%3E%3C/svg%3E");
            }

            @media (min-width: $break-large) {
                &:after {
                    width: 20px;
                    height: 14px;
                    background-size: contain;
                    background-repeat: no-repeat;
                    top: calc(50% - 4px);
                    right: -27px;
                }
            }
        }
        a.last-word-wrap {
            color: $color-green-light;
            margin-right: 35px;
            font-weight: 600;
            @include fontsize(14px);
            line-height: 1.3;
            transition: all .3s ease;
            position: static;
            &:hover {
                color: $color-white;
                .last-word:after {
                    background-image: url("data:image/svg+xml,%3Csvg width='14' height='10' viewBox='0 0 14 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.56369 0L14 5.02381L9.56369 10H7.55732L11.1911 5.90476H0V4.11905H11.1911L7.55732 0H9.56369Z' fill='#{str-replace(#{$color-white}, '#', '%23')}'/%3E%3C/svg%3E");
                }
            }
            &:focus {
                @include focus-light();
            }

            &::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;  
                width: 100%;
                height: 100%;
                background-color: transparent;
            }

            @media (min-width: $break-medium) {
                @include fontsize(18px);
            }

            @media (min-width: $break-large) {
                @include fontsize(24px);
            }
        }
    }

    &.js-active {
        .featured3up__header {
            .decorative-lines {
                &:before {
                    transform: scaleX(1);
                }
                &:after {
                    transform: scaleX(1);
                }
            }
        }
        .circle:after {
            opacity: 1;
        }
        .featured3up__intro {
            &:before {
                transform: scaleY(1);
            }
            &:after {
                transform: scaleX(1);
            }
            .decorative-lines:before {
                transform: scaleY(1);
            }
        }
        .column--three {
            &:before {
                transform: scaleX(1);
            }
            &:after {
                opacity: 1;
            }
        }
    }

    @media (min-width: $break-large) {
        max-width: 1640px;
    }
}