/**
 * @file
 * Generic Block: 3 Column
 *
 * Styles for Generic Block: 3 Column object.
 */

.gen3col {

    a.arrow-icon span.last-word:after {
        right: -3px;
        bottom: 8px;
        width: 18px;
        height: 13px;
        background-image: url("data:image/svg+xml,%3Csvg width='30' height='22' viewBox='0 0 30 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.4936 0L30 11.0524L20.4936 22H16.1943L23.9809 12.9905H0V9.0619H23.9809L16.1943 0H20.4936Z' fill='%23046A38'/%3E%3C/svg%3E");

        @media (min-width: $break-medium) {
            right: -12px;
            bottom: 10px;
            width: 25px;
            height: 18px;
        }

        @media (min-width: $break-large) {
            right: -22px;
            bottom: 10px;
            width: 30px;
            height: 24px;
        }
    }

    a.arrow-icon:hover span.last-word:after {
        background-image: url("data:image/svg+xml,%3Csvg width='30' height='22' viewBox='0 0 30 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.4936 0L30 11.0524L20.4936 22H16.1943L23.9809 12.9905H0V9.0619H23.9809L16.1943 0H20.4936Z' fill='#{str-replace(#{$color-green-dark}, '#', '%23')}'/%3E%3C/svg%3E");
    }

    //## Animation triggers
    .column {
        &__col.scroll-animate {
            @include slide-fade-in;
        }
    }

    .column {
        &__img {
            margin-bottom: 1.25rem;
            a:before {
                display: none;
            }
            img {
                aspect-ratio: 288/256;
                object-fit: cover;
            }
        }
        &__title {
            margin-bottom: 0.375rem;
            h3 {
                text-transform: capitalize;
                margin: 0;
            }
        }
    }

    @media (min-width: $break-medium) {
        .column {
            &__img {
                margin-bottom: 2.5rem;
                img {
                    aspect-ratio: 186/186;
                }
            }
            &__title {
                margin-bottom: .5rem;
                h3 {
                    @include fontsize(28px);
                    line-height: 1.3;
                }
            }
            &__subtitle {
                margin-bottom: 0.5rem;
            }
        }
    }
    
    @media (min-width: $break-large) {
        .column {
            &__img {
                margin-bottom: 2.5rem;
                img {
                    aspect-ratio: 186/186;
                }
            }
            &__title {
                margin-bottom: 0.75rem;
                h3 {
                    @include fontsize(38px);
                    line-height: 1;
                }
            }
            &__subtitle {
                margin-bottom: 0.75rem;
            }
        }

        .scroll-animate.js-active + .scroll-animate.js-active {
            transition-delay: 100ms;

            & + .scroll-animate.js-active {
                transition-delay: 200ms;
            }
        }
    }
}