main {
    grid-column: full-width;
    display: grid;
    grid-template-columns: inherit;
    align-content: start;
    & > * {
        grid-column: content;
    }
    & > :is(h1, h2, h3, h4, h5, h6) {
        margin-bottom: 0;
    }
}

@container (inline-size > 60ch) {
    section:not(:has(> img)) {
        & > p {
            padding-inline: clamp(0px, 3vw, 3ch);
        }
    }
    section:has(> img) {
        display: grid;
        position: relative;
        column-gap: var(--spacing-related);
        margin-top: var(--spacing-unrelated);
        &:nth-of-type(2n) {
            grid-column: breakout-left;
            grid-template-columns: [image-start] 1fr [image-end content-start] 1fr [content-end];
        }
        &:nth-of-type(2n + 1) {
            grid-column: breakout-right;
            grid-template-columns: [content-start] 1fr [content-end image-start] 1fr [image-end];
        }
        & > * {
            grid-column: content;
        }
        & > img {
            grid-column: image;
            position: absolute;
            box-shadow: 0 0 20px 0 hsl(0 0 50%);
            width: 100%;
            top: 50%;
            translate: 0 -50%;
            object-fit: cover;
        }
    }
}