.petals {
    width: 100%;
    height: 36rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 11;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-areas:
        "a b c d e f g h";
    overflow: hidden;
    justify-items: center;

    .petal {
        width: 2rem;
        height: 2rem;
        background-size: contain;
        background-repeat: no-repeat;
        animation: fall linear infinite;
        opacity: 1;

        &:nth-child(even) {
            animation-duration: 15s;
        }

    }

    .petal-1 {
        grid-area: a;
        background-image: url('../assets/petal-1.png');
        animation-duration: 10s;
    }

    .petal-2 {
        grid-area: b;
        background-image: url('../assets/petal-2.png');
        animation-duration: 12s;
    }

    .petal-3 {
        grid-area: c;
        background-image: url('../assets/petal-3.png');
        animation-duration: 9s;
    }

    .petal-4 {
        grid-area: d;
        background-image: url('../assets/petal-4.png');
        animation-duration: 13s;
    }

    .petal-5 {
        grid-area: e;
        background-image: url('../assets/petal-5.png');
        animation-duration: 10.5s;
    }

    .petal-6 {
        grid-area: f;
        background-image: url('../assets/petal-6.png');
        animation-duration: 8.5s;
    }

    .petal-7 {
        grid-area: g;
        background-image: url('../assets/petal-1.png');
        animation-duration: 12.5s;
    }

    .petal-8 {
        grid-area: h;
        background-image: url('../assets/petal-2.png');
        animation-duration: 9.5s;
    }
}

@keyframes fall {
    0% {
        transform: translateY(-10%) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translateY(110vh) rotate(360deg);
        opacity: .75;
    }
}

@media (max-width: 1440px) {
    .petals {
        height: 32rem;

        .petal {
            width: 1.75rem;
            height: 1.75rem;
        }
    }
}

@media (max-width: 1024px) {
    .petals {
        height: 30rem;

        .petal {
            width: 1.5rem;
            height: 1.5rem;
        }
    }
}

@media (max-width: 768px) {
    .petals {
        height: 24rem;

        .petal {
            width: 1.25rem;
            height: 1.25rem;
        }
    }
}

@media (max-width: 512px) {
    .petals {
        height: 20rem;
    }
}