@use "../base/mixins";
@use "../base/variables";
@use "../base/functions";

// Hello from the new raptor create v2 - Hero 01

.hero--01 {
    @extend %hero;

    .eyebrow {
        font-weight: 700;
        color: var(--c-primary);
        font-size: .875rem;
        margin-bottom: 16px;
    }

    border: var(--site-padding) solid var(--c-white);

    .hero__content {
        background: var(--c-l-grey);
        padding: clamp(46px, 5vw, 126px) 30px;
        border-radius: calc(var(--border-radius) * 2);
        text-align: center;

        p {
            &:last-of-type {
                margin-bottom: functions.get-baseline();
            }
        }

        h1 {
            font-size: clamp(.875rem, 5vw, 4rem);
            margin-bottom: clamp(28px, 4vw, 64px);
        }
    }

    &.with-post-thumbnail {
        min-height: calc(60svh - var(--header-height));
        max-height: 1200px;

        img {
            border-radius: calc(var(--border-radius) * 2);
        }
    }

    @include mixins.min-width( m ) {
        &.with-post-thumbnail {
            min-height: calc(100svh - var(--header-height));
        }
    }
}