.hero {
    position: relative;
    width: 100%;
}

.hero__img-wrap {
    position: relative;
    height: 600px;
}

.hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.15);
}

.hero__header {
    position: relative;
    z-index: 2;
    display: flex;
    height: 100%;
    align-items: flex-end;
    padding-bottom: 112px;
}

.hero__title {
    font-family: var(--heading-font);
    font-size: clamp(2.5rem, 5vw + 1rem, 5.5rem);
    font-weight: 400;
    line-height: 0.95;
    color: #fff;
    letter-spacing: 1.76px;
}

.hero__title strong {
    font-weight: 700;
}

.hero__title em {
    font-family: var(--body-font);
    font-size: clamp(2.375rem, 4.75vw + 0.95rem, 5.1875rem);
    font-weight: 500;
    font-style: italic;
    letter-spacing: 1.38px;
}