.archive-page {
    min-height: 100%;
}

.archive-hero {
    --archive-section-bottom: clamp(26px, 2.4vh, 42px);
    min-height: 100svh;
    padding: clamp(136px, 16vh, 190px) var(--edge) var(--archive-section-bottom);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

.archive-gallery {
    width: 100%;
    display: grid;
    grid-template-columns: 0.78fr 0.78fr 0.78fr 0.78fr 1.22fr 0.78fr 0.78fr;
    gap: clamp(18px, 1.38vw, 34px);
    align-items: end;
}

.archive-image {
    margin: 0;
    overflow: hidden;
    background: rgba(7, 7, 7, 0.08);
}

.archive-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: var(--site-image-filter);
}

.archive-image--01 {
    height: clamp(250px, 35vh, 372px);
}

.archive-image--02 {
    height: clamp(248px, 34.5vh, 366px);
}

.archive-image--03 {
    height: clamp(128px, 16vh, 190px);
}

.archive-image--04 {
    height: clamp(270px, 36vh, 386px);
    border: 4px solid var(--paper);
}

.archive-image--05 {
    height: clamp(360px, 54vh, 560px);
}

.archive-image--06 {
    height: clamp(210px, 29vh, 312px);
}

.archive-image--07 {
    height: clamp(250px, 35vh, 368px);
}

@media (max-width: 1100px) {
    .archive-gallery {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .archive-image--05 {
        grid-column: span 2;
    }
}

@media (max-width: 900px) {
    .archive-hero {
        min-height: auto;
        padding: clamp(112px, 17svh, 150px) var(--edge) 48px;
        display: block;
    }

    .archive-gallery {
        display: flex;
        flex-direction: column;
        gap: clamp(32px, 8svh, 78px);
        align-items: stretch;
    }

    .archive-image {
        width: min(88vw, 520px);
    }

    .archive-image:nth-child(odd) {
        align-self: flex-start;
        margin-left: calc(var(--edge) * -0.38);
    }

    .archive-image:nth-child(even) {
        align-self: flex-end;
        margin-right: calc(var(--edge) * -0.38);
    }

    .archive-image--01,
    .archive-image--02,
    .archive-image--07 {
        height: min(72svh, 520px);
    }

    .archive-image--03,
    .archive-image--06 {
        height: min(44svh, 330px);
    }

    .archive-image--04 {
        height: min(76svh, 560px);
    }

    .archive-image--05 {
        width: min(92vw, 560px);
        height: min(68svh, 500px);
    }
}