@keyframes header-shift {
    0% { transform: scale(1); }
    100% { transform: scale(1.2); }
}

.page--longform {
    .col--md {
        h2 { clear: both; }
    }
}

.image-circle {
    overflow: unset;
    img { max-width: 300px; max-height: 300px; width: 100%; height: auto; margin-inline: auto;}
    &.image-left { margin-top: 0; margin-inline: auto; }
}

@media only screen and (min-width: 30em) { /* 480px */
    .image-circle {
        img { max-width: 300px; max-height: 300px; }
        &.image-left { width: auto; height: auto; margin-top: 0; margin-left: 0; margin-right: 2rem; }
    }
}


@media only screen and (min-width: 48em) { /* 768px */
    .page-header--screen .page-image img { animation: header-shift; animation-timeline: view(); animation-range:0% 200%; }
    .section--letters { gap: var(--grid-gap); }
    .section--canonization {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }
}

@media only screen and (min-width: 60em) { /* 960px */
    .page-header--screen .page-image img { min-height: unset; max-height: 100vh; object-fit: contain; object-position: center; }
    .section--canonization { margin-block: clamp(3rem, 5vw, 6rem); min-height: 100vh;
        grid-template-rows: 1fr;
        grid-template-columns: 60vw 1fr;
            .section__content {
                padding: clamp(3rem, 5vw, 6rem) clamp(3rem, 5vw, 6rem) clamp(3rem, 5vw, 6rem) 0;
                grid-column: 2/3;
                grid-row: 1/-1;
                z-index: 1;
        }
        .bg--photo {
            position: sticky;
            top: 0;
            height: 100vh;
            grid-column: 1/-1;
            grid-row: 1/-1;
            width: 100vw;
            z-index: 0;
                img { object-fit: cover; width: 100%; height: 100%; }
            }
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-header--screen .page-image img { animation: none; }
}