/* The note heading reads as one composition, rather than two islands of text. */
.notes .section-top {
    display: grid;
    grid-template-columns: minmax(390px, 1fr) minmax(260px, .58fr);
    gap: clamp(42px, 7vw, 100px);
    justify-content: start;
    max-width: 1020px
}

.notes .section-top>p {
    width: auto;
    margin: 0 0 8px;
    align-self: end;
    padding-bottom: 5px
}

.motion-ready .reveal-section .enter-left,
.motion-ready .reveal-section .enter-right,
.motion-ready .reveal-section .enter-top,
.motion-ready .reveal-section .enter-bottom {
    opacity: 0;
    transition: opacity .78s ease, transform .78s cubic-bezier(.16, .74, .25, 1)
}

.motion-ready .reveal-section .enter-left {
    transform: translateX(-52px)
}

.motion-ready .reveal-section .enter-right {
    transform: translateX(52px)
}

.motion-ready .reveal-section .enter-top {
    transform: translateY(-40px)
}

.motion-ready .reveal-section .enter-bottom {
    transform: translateY(40px)
}

.motion-ready .reveal-section.is-visible .enter-left,
.motion-ready .reveal-section.is-visible .enter-right,
.motion-ready .reveal-section.is-visible .enter-top,
.motion-ready .reveal-section.is-visible .enter-bottom {
    opacity: 1;
    transform: translate(0)
}

.motion-ready .reveal-section.is-visible .enter-right {
    transition-delay: .1s
}

.motion-ready .reveal-section.is-visible .enter-bottom {
    transition-delay: .16s
}

.motion-ready .reveal-section.is-visible .enter-top {
    transition-delay: .08s
}

@media(prefers-reduced-motion:reduce) {

    .motion-ready .reveal-section .enter-left,
    .motion-ready .reveal-section .enter-right,
    .motion-ready .reveal-section .enter-top,
    .motion-ready .reveal-section .enter-bottom {
        opacity: 1;
        transform: none;
        transition: none
    }
}

@media(max-width:760px) {
    .notes .section-top {
        display: block
    }

    .notes .section-top>p {
        margin-top: 20px
    }

    .motion-ready .reveal-section .enter-left {
        transform: translateX(-24px)
    }

    .motion-ready .reveal-section .enter-right {
        transform: translateX(24px)
    }

    .motion-ready .reveal-section .enter-top {
        transform: translateY(-24px)
    }

    .motion-ready .reveal-section .enter-bottom {
        transform: translateY(24px)
    }
}