/* ==========================================================================
   Home page
   ========================================================================== */

/* Hero: letter photo (left, wavy edge baked into the image) + logo (right) */
.hero {
    max-width: var(--page-max);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 38.6% minmax(0, 1fr);
    align-items: start;
    overflow: hidden;
}

.hero__photo {
    width: 100%;
}

.hero__brand {
    display: flex;
    justify-content: flex-end;
    padding: min(4.6vw, 88px) min(3vw, 58px) 0 min(2vw, 38px);
}

.hero__logo {
    width: 100%;
    max-width: 1100px;
}

.hero__logo img {
    width: 100%;
}

/* Latest entries */
.latest {
    position: relative;
    padding-top: 40px;
    padding-bottom: 88px;
}

.latest__rule {
    position: absolute;
    top: 0;
    right: var(--gutter);
    width: 45%;
    height: 1px;
    background: var(--color-line);
}

@media (max-width: 760px) {
    .hero {
        grid-template-columns: minmax(0, 1fr);
    }

    .hero__brand {
        order: -1;
        justify-content: center;
        padding: 36px 24px 8px;
    }

    .hero__logo {
        max-width: 440px;
    }

    .hero__photo {
        width: 82%;
    }

    .latest__rule {
        width: auto;
        left: var(--gutter);
    }
}