@media only screen and (max-width: 600px) {
.hero-module .hero {
        align-items: flex-end;
        display: flex;
        margin: 0 auto;
        width: 150%;
        min-height: 200px;
        padding: 0 0 var(--size-gutter);
        position: relative;
    }
}

.hero-module .hero {
    align-items: flex-end;
    display: flex;
    margin: 0 auto;
    max-width: var(--size-max-width);
    min-height: 200px;
    padding: 0 0 var(--size-gutter);
    position: relative;
}

.hero-module .image {
    /*
      Ensure golden ratio for the hero size while limiting it to some extend to
      the viewport width
    */
    height: 61.8vh;
    max-height: 520px;
    width: 100%;
    overflow: hidden;
}

.hero-module .details {
    background: var(--background);
    left: 0;
    max-width: 40rem;
    width: 85%;
    padding: var(--space-2xl) var(--size-gutter) 0;
    position: absolute;
}

.hero-module .title {
    letter-spacing: -0.012em;
    font-size: var(--text-title);
    font-weight: var(--extrabold);
    line-height: var(--solid);
    margin: 0 0 var(--space-xl);
}

.hero-module .content {
    font-size: var(--text-lead);
    font-weight: var(--semibold);
    margin: 0;
}

@media (min-width: 480px) {
    .hero-module .details {
        padding-top: var(--space-3xl);
    }
}

@media (min-width: 768px) {
    .hero-module .hero {
        padding-top: var(--size-gutter);
    }

    .hero-module .details {
        max-width: 44rem;
        padding: var(--space-3xl) var(--size-gutter) 0;
    }
}

@media (min-width: 1024px) {
    .hero-module .image {
        margin-left: auto;
        width: 85%;
    }

    .hero-module .details {
        left: var(--size-gutter);
        padding: var(--space-3xl) var(--size-gutter) 0 0;
    }
}