/* Hero
--------------------------------------------- */

.hero {
    .container {
        display: flex;
        padding: var(--wp--custom--layout--block-gap-big);
        column-gap: var(--wp--custom--layout--column-gap);
    }

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

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

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

.hero__body h2 {
    font-size: var(--wp--preset--font-size--fluid-24);
    color: var(--wp--preset--color--cobalt);
}

.hero__body h3 {
    font-size: var(--wp--preset--font-size--body-xl);
    text-transform: uppercase;
}

.hero__body {
    /* font-size: var(--wp--preset--font-size--body-lg); */
}

.hero__image {
    position: relative;

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

.column.has-video {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero__video {
    position: relative;
    padding-top: 56.25%;
    flex: 1 1 auto;
}


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

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

    .column:nth-child(1) {
        padding-left: var(--wp--custom--layout--block-gap);
    }

    .column:nth-child(2) {
        padding-right: var(--wp--custom--layout--block-gap-big);
    }
}

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

.hero.bg-cobalt {
    .hero__title {
        color: var(--wp--preset--color--white);
    }
}

/* Responsive
--------------------------------------------- */
@media (width <=992px) {
    .hero {
        .container {
            flex-direction: column;
        }

        .column:nth-child(n) {
            padding: 0;
        }

        .button--primary {
            margin-bottom: var(--wp--custom--layout--block-gap-big);
        }
    }

    .hero__image img {
        width: 100%
    }
}

@media (width >992px) {
    .hero__image {
        margin-top: var(--wp--custom--layout--block-gap-xl);
    }
}