/* Feature
--------------------------------------------- */

.feature {
    padding: var(--wp--custom--layout--block-gap-xl) 0;

    .container {
        display: flex;
    }

    .container>.column {
        flex: 1 1;
    }
}

.feature__eyebrow {
    color: var(--wp--preset--color--emerald);
    font-size: var(--wp--preset--font-size--body-xl);
    text-transform: uppercase;
}

.feature__icon {
    max-width: 250px;
    margin-bottom: var(--wp--custom--layout--block-gap-big);
}

.feature__title {
    color: var(--wp--preset--color--cobalt);
    font-size: var(--wp--preset--font-size--fluid-24);
    margin-top: 0;
}

.feature__paragraph {
    font-size: var(--wp--preset--font-size--body-lg);
}

.feature__image {
    position: relative;
    /* margin-top: 100px; */

    &::after {
        content: "";
        background: var(--wp--preset--color--emerald);
        width: 250px;
        height: 10px;
        position: absolute;
        bottom: -10px;
        left: 0;
        display: block;
        z-index: 1;
    }
}

/* Variations
--------------------------------------------- */

.feature.text-left,
.feature.image-left {
    .container {
        column-gap: var(--wp--custom--layout--column-gap);
    }
}

.feature.image-left {
    .container {
        flex-direction: row-reverse;
    }
}

@media (width <=992px) {

    .feature.text-left>.container,
    .feature.image-left>.container {
        flex-direction: column-reverse;
    }

    .feature.image-left .column:nth-child(2),
    .feature.text-left .column:nth-child(2) {
        padding: 0;
        margin-bottom: var(--wp--custom--layout--block-gap);
    }
}

@media (width < 1500px) {

    .wp-block-column .feature.text-left>.container,
    .wp-block-column .feature.image-left>.container {
        flex-direction: column-reverse;
    }

    .wp-block-column .feature.image-left .column:nth-child(2),
    .wp-block-column .feature.text-left .column:nth-child(2) {
        padding: 0;
        margin-bottom: var(--wp--custom--layout--block-gap);
    }
}

.feature.smaller-title {
    .feature__title {
        font-size: var(--wp--preset--font-size--fluid-24);
    }
}

.feature.hide-highlight {
    .feature__image::after {
        display: none;
    }
}

.feature.title-cobalt {
    .feature__title {
        color: var(--wp--preset--color--cobalt);
    }
}

.feature.bg-cobalt,
.feature.bg-emerald {
    .feature__title {
        color: var(--wp--preset--color--white);
    }
}

.feature.bg-emerald {
    .feature__eyebrow {
        color: var(--wp--preset--color--cobalt);
    }
}