.cards {
    margin-top: 40px;
    column-count: 2;
    column-gap: 1em;
}

.cards > section {
    margin: 0 0 1em;
    width: 100%;
    
    page-break-inside: avoid;
    break-inside: avoid-column; 
    flex-direction: column;

}

section {
    overflow:hidden;
}

section img:first-child {
    margin: -8px -18px 8px -18px;
    max-width: calc(100% + 36px);
}

header[role=banner] {
    background:
        linear-gradient(
                rgba(199, 228, 255, 0.8),
                rgba(199, 228, 255, 0.8)
        ),
        url("milky-way-4526277.jpg"),
        linear-gradient(#b6bdc3, #cedce7);
    background-position: center center;
    background-size: cover;
}


.image-attribution {
    display: inline-block;
    padding: 16px;
    transition: background 0.2s;
    border-radius: 8px;
}
.image-attribution .attribution {
    /* display: none; */
    opacity: 0;
    transition: opacity 0.2s;
    margin-left: 8px;
}
.image-attribution:hover {
    background-color: var(--content-background);
}
.image-attribution:hover .attribution {
    display: inline;
    opacity: 1;
}

@media (prefers-color-scheme: dark) {
    header[role=banner] {
        background:
            linear-gradient(
                rgba(43, 54, 65, 0.6),
                rgba(43, 54, 65, 0.6)
            ),
            url("milky-way-4526277.jpg"),
            linear-gradient(#b6bdc3, #cedce7);
        
            background-position: center center;
        background-size: cover;
    }
}
@media screen and (max-width: 75ch) {
    .cards {
        column-count: 1;
    }
    header > div {
        padding: 18px;
    }
}

footer {
    text-align: center;
}