section {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    overflow: hidden;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    width: 100%;
}

section::before {
    content: '';
    height: 200%;
    left: 50%;
    min-width: 100%;
    padding: 0;
    position: fixed;
    top: 0;
    transform: translateX(-50%);
    transition: background-color var(--time-sky-transition);
    width: var(--size-width-background);
}

section:nth-child(1)::before {
    background-color: var(--color-background);
    clip-path: polygon(
        0 9%, 
        13% 14%, 
        24% 11%, 
        39% 13%, 
        49% 10%, 
        62.5% 14.5%, 
        77% 11%, 
        87.5% 13%,
        100% 10%,
        100% 100%,
        0 100%);
}

section:nth-child(2)::before {
    background-color: var(--color-middleground);
    clip-path: polygon(
        0 25%,
        15% 21%,
        34% 23%,
        53% 19%,
        64% 26%,
        83% 20%,
        100% 25%,
        100% 100%,
        0 100%);
}

section:nth-child(3)::before {
    background-color: var(--color-foreground);
    clip-path: polygon(
        0 37%,
        25% 28%,
        50% 38%,
        75% 33%, 
        100% 43%, 
        100% 100%,
        0 100%);
}