#hero-image {
    position: relative;
    overflow: hidden;
    min-height: var(--hero-min-height);
    max-height: var(--hero-max-height);
    height: clamp(
        var(--hero-min-height),
        var(--hero-block-height, 30vw),
        var(--hero-max-height)
    );
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;


    h1 {
        color:        var(--hero-default);
        font-family:  var(--base-hero-font-family);
        font-weight:  400;
        font-size:    var(--base-hero-font-size);
        line-height:  var(--base-hero-line-height);
        margin:       0;
    }
}