.yhb-hero {
    padding-block-end: 30px;
    padding-inline: 30px;
    position: relative;
}

.yhb-hero__media {
    border-radius: 1em;
    overflow: hidden;
    position: relative;
    z-index: 1;

    figure,
    img {
        aspect-ratio: 18/8;
        display: block;
        height: 100%;
        object-fit: cover;
        width: 100%;
    }

    &::after {
        background-color: var(--wp--preset--color--midnight);
        content: "";
        display: block;
        left: 0;
        height: 100%;
        opacity: 0.6;
        position: absolute;
        top: 0;
        width: 100%;
    }
}

.yhb-hero__content {
    bottom: 20%;
    left: 0;
    padding: 30px;
    position: absolute;
    width: 100%;
    z-index: 2;
}

.yhb-hero__title {
    color: var(--wp--preset--color--white);
    font-size: clamp(1rem, 5vw, 3.75rem);
    margin: auto;
    padding-inline: 30px;
    text-align: center;
    text-transform: uppercase;
}