body {
    background-color: black;
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}


section {
    columns: 2;
    padding: 16px 10vw;
    column-gap: 50px
}

section img {
    border-radius: 4px;
    width: 100%;
    height: auto;
    margin-bottom: 30px;

    transition: transform 200ms ease-in-out;


    animation: reveal linear both;
    animation-timeline: view();
    animation-range: entry 20% cover 40%;
}

section img:hover {
    transform: scale(1.05);
}


h1 {
    color: white;
    text-align: center;
    font-size: 40px;
    padding: 16px;
    margin: 0;
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 10;

    animation: enhance-header linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 200px;
}

@keyframes reveal {
    from {
        opacity: 0;
        translate: 0 100px;
        scale: .8;
    }

    to {
        opacity: 1;
        translate: 0 0;
        scale: 1;
    }
}

@keyframes enhance-header {
    to {
        background: rgba(255, 255, 255, .4);
        backdrop-filter: blur(10px);
        font-size: 30px;
        color: black;
    }
}