.dropping-tag {
    animation-play-state: paused !important;
}

.dropping-tag.active {
    animation-play-state: running !important;
}

/* Общие характеристики блоков */
.dropping-tag {
    display: flex;
    position: relative;
    padding: 4px 12px;
    border: 1px solid;
    border-radius: 8px;
    text-align: center;
    font-size: 18px;
    width: fit-content;
    cursor: pointer;
    z-index: 2;
    font-family: Inter;
    /*font-size: 20px;*/
    /*font-weight: 500;*/
    /*line-height: 24px;*/
}

/* Цветовая раскраска блоков */
.dropping-tag.dropping-tag-color-1 {
    color: #C1B46D;
    border-color: #E6DFB7;
    background: rgb(240,233,194);
    background: linear-gradient(0deg, rgba(240,233,194,1) 0%, rgba(255,252,235,1) 100%);
}
.dropping-tag.dropping-tag-color-1:hover {
    background: linear-gradient(0deg, rgba(239,224,184,1) 0%, rgba(245,242,225,1) 100%);
}
.dropping-tag.dropping-tag-color-2 {
    color: #9A71C4;
    border-color: #D4BDEA;
    background: rgb(217,194,240);
    background: linear-gradient(0deg, rgba(217,194,240,1) 0%, rgba(246,238,255,1) 100%);
}
.dropping-tag.dropping-tag-color-2:hover {
    background: linear-gradient(0deg, rgba(216,187,230,1) 0%, rgba(236,228,245,1) 100%);
}
.dropping-tag.dropping-tag-color-3 {
    color: #C98773;
    border-color: #E9CFC7;
    background: rgb(240,205,194);
    background: linear-gradient(0deg, rgba(240,205,194,1) 0%, rgba(255,239,234,1) 100%);
}
.dropping-tag.dropping-tag-color-3:hover {
    background: linear-gradient(0deg, rgba(239,195,184,1) 0%, rgba(245,219,214,1) 100%);
}
.dropping-tag.dropping-tag-color-4 {
    color: #79ACD2;
    border-color: #C0DCF0;
    background: rgb(194,221,240);
    background: linear-gradient(0deg, rgba(194,221,240,1) 0%, rgba(239,248,254,1) 100%);
}
.dropping-tag.dropping-tag-color-4:hover {
    background: linear-gradient(0deg, rgba(193,211,230,1) 0%, rgba(229,238,244,1) 100%);
}
.dropping-tag.dropping-tag-color-5 {
    color: #83C16D;
    border-color: #C3E3B8;
    background: rgb(206,240,194);
    background: linear-gradient(0deg, rgba(206,240,194,1) 0%, rgba(235,250,229,1) 100%);
}
.dropping-tag.dropping-tag-color-5:hover {
    background: linear-gradient(0deg, rgba(196,230,184,1) 0%, rgba(225,240,219,1) 100%);
}

/* Размещение блок 1 */
.dropping-tag#dropping-tag-1-0 {
    transform: translate(220px, 47px) rotate(15deg);
    animation: dropping-tag-color-1 1.9s ease-in-out 0s 1 normal none;
}
.dropping-tag#dropping-tag-2-0 {
    transform: translate(100px, 60px) rotate(-18deg);
    animation: dropping-tag-color-2 1.7s ease-in-out 0s 1 normal none;
}
.dropping-tag#dropping-tag-3-0 {
    transform: translate(210px, 47px) rotate(-7deg);
    animation: dropping-tag-color-3 1.5s ease-in-out 0s 1 normal none;
}
.dropping-tag#dropping-tag-4-0 {
    transform: translate(100px, 57px);
    animation: dropping-tag-color-4 1.2s ease-in-out 0s 1 normal none;
}
.dropping-tag#dropping-tag-5-0 {
    transform: translate(220px, 30px);
    animation: dropping-tag-color-5 1s ease-in-out 0s 1 normal none;
}

/* Размещение блок 2 */
.dropping-tag#dropping-tag-1-1 {
    transform: translate(200px, 40px) rotate(18deg);
    animation: dropping-tag-color-6 1.9s ease-in-out 0s 1 normal none;
}
.dropping-tag#dropping-tag-2-1 {
    transform: translate(100px, 60px) rotate(-18deg);
    animation: dropping-tag-color-7 1.7s ease-in-out 0s 1 normal none;
}
.dropping-tag#dropping-tag-3-1 {
    transform: translate(210px, 47px) rotate(-7deg);
    animation: dropping-tag-color-8 1.5s ease-in-out 0s 1 normal none;
}
.dropping-tag#dropping-tag-4-1 {
    transform: translate(90px, 57px);
    animation: dropping-tag-color-9 1.2s ease-in-out 0s 1 normal none;
}
.dropping-tag#dropping-tag-5-1 {
    transform: translate(180px, 30px);
    animation: dropping-tag-color-10 1s ease-in-out 0s 1 normal none;
}

/* Размещение блок 3 */
.dropping-tag#dropping-tag-1-2 {
    transform: translate(212px, 127px) rotate(10deg);
    animation: dropping-tag-color-11 1.9s ease-in-out 0s 1 normal none;
}
.dropping-tag#dropping-tag-2-2 {
    transform: translate(94px, 132px) rotate(-26deg);
    animation: dropping-tag-color-12 1.7s ease-in-out 0s 1 normal none;
}
.dropping-tag#dropping-tag-3-2 {
    transform: translate(203px, 118px) rotate(29deg);
    animation: dropping-tag-color-13 1.5s ease-in-out 0s 1 normal none;
}
.dropping-tag#dropping-tag-4-2 {
    transform: translate(40px, 122px) rotate(-16deg);
    animation: dropping-tag-color-14 1.2s ease-in-out 0s 1 normal none;
}
.dropping-tag#dropping-tag-5-2 {
    transform: translate(160px, 115px);
    animation: dropping-tag-color-15 1s ease-in-out 0s 1 normal none;
}

/* Падение блок 1 */
@keyframes dropping-tag-color-1 {
    0% {
        animation-timing-function: ease-in;
        opacity: 0;
        transform: translate(220px, -200px) rotate(0deg);
    }
    70% {
        animation-timing-function: ease-out;
        transform: translate(220px, 45px) rotate(10deg);
    }
    80% {
        animation-timing-function: ease-in;
        transform: translate(220px, 47px) rotate(15deg);
    }
    90% {
        animation-timing-function: ease-in;
        transform: translate(220px, 45px) rotate(10deg);
    }
    95% {
        animation-timing-function: ease-in;
        transform: translate(220px, 47px) rotate(15deg);
    }
    100% {
        animation-timing-function: ease-out;
        transform: translate(220px, 47px) rotate(15deg);
    }
}
@keyframes dropping-tag-color-2 {
    0% {
        animation-timing-function: ease-in;
        opacity: 0;
        transform: translate(100px, -200px) rotate(0deg);
    }
    70% {
        animation-timing-function: ease-out;
        transform: translate(100px, 57px) rotate(-10deg);
    }
    80% {
        animation-timing-function: ease-in;
        transform: translate(100px, 57px) rotate(-20deg);
    }
    90% {
        animation-timing-function: ease-in;
        transform: translate(100px, 60px) rotate(-10deg);
    }
    95% {
        animation-timing-function: ease-in;
        transform: translate(100px, 60px) rotate(-20deg);
    }
    100% {
        animation-timing-function: ease-out;
        transform: translate(100px, 60px) rotate(-20deg);
    }
}
@keyframes dropping-tag-color-3 {
    0% {
        animation-timing-function: ease-in;
        opacity: 0;
        transform: translate(210px, -200px) rotate(0deg);
    }
    70% {
        animation-timing-function: ease-out;
        transform: translate(210px, 47px) rotate(-7deg);
    }
    80% {
        animation-timing-function: ease-in;
        transform: translate(210px, 50px) rotate(-3deg);
    }
    90% {
        animation-timing-function: ease-in;
        transform: translate(210px, 50px) rotate(-7deg);
    }
    95% {
        animation-timing-function: ease-in;
        transform: translate(210px, 50px) rotate(-4deg);
    }
    100% {
        animation-timing-function: ease-out;
        transform: translate(210px, 47px) rotate(-7deg);
    }
}
@keyframes dropping-tag-color-4 {
    0% {
        animation-timing-function: ease-in;
        opacity: 0;
        transform: translate(100px, -200px) rotate(0deg);
    }
    70% {
        animation-timing-function: ease-out;
        transform: translate(100px, 57px);
    }
    80% {
        animation-timing-function: ease-in;
        transform: translate(100px, 47px);
    }
    100% {
        animation-timing-function: ease-out;
        transform: translate(100px, 57px);
    }
}
@keyframes dropping-tag-color-5 {
    0% {
        animation-timing-function: ease-in;
        opacity: 0;
        transform: translate(220px, -200px) rotate(0deg);
    }
    70% {
        animation-timing-function: ease-out;
        transform: translate(220px, 30px);
    }
    80% {
        animation-timing-function: ease-in;
        transform: translate(220px, 20px);
    }
    100% {
        animation-timing-function: ease-out;
        transform: translate(220px, 30px);
    }
}

/* Падение блок 2 */
@keyframes dropping-tag-color-6 {
    0% {
        animation-timing-function: ease-in;
        opacity: 0;
        transform: translate(200px, -200px) rotate(0deg);
    }
    70% {
        animation-timing-function: ease-out;
        transform: translate(200px, 38px) rotate(10deg);
    }
    80% {
        animation-timing-function: ease-in;
        transform: translate(200px, 40px) rotate(15deg);
    }
    90% {
        animation-timing-function: ease-in;
        transform: translate(200px, 38px) rotate(10deg);
    }
    95% {
        animation-timing-function: ease-in;
        transform: translate(200px, 40px) rotate(15deg);
    }
    100% {
        animation-timing-function: ease-out;
        transform: translate(200px, 40px) rotate(15deg);
    }
}
@keyframes dropping-tag-color-7 {
    0% {
        animation-timing-function: ease-in;
        opacity: 0;
        transform: translate(100px, -200px) rotate(0deg);
    }
    70% {
        animation-timing-function: ease-out;
        transform: translate(100px, 57px) rotate(-10deg);
    }
    80% {
        animation-timing-function: ease-in;
        transform: translate(100px, 57px) rotate(-20deg);
    }
    90% {
        animation-timing-function: ease-in;
        transform: translate(100px, 60px) rotate(-10deg);
    }
    95% {
        animation-timing-function: ease-in;
        transform: translate(100px, 60px) rotate(-20deg);
    }
    100% {
        animation-timing-function: ease-out;
        transform: translate(100px, 60px) rotate(-20deg);
    }
}
@keyframes dropping-tag-color-8 {
    0% {
        animation-timing-function: ease-in;
        opacity: 0;
        transform: translate(210px, -200px) rotate(0deg);
    }
    70% {
        animation-timing-function: ease-out;
        transform: translate(210px, 47px) rotate(-7deg);
    }
    80% {
        animation-timing-function: ease-in;
        transform: translate(210px, 50px) rotate(-3deg);
    }
    90% {
        animation-timing-function: ease-in;
        transform: translate(210px, 50px) rotate(-7deg);
    }
    95% {
        animation-timing-function: ease-in;
        transform: translate(210px, 50px) rotate(-4deg);
    }
    100% {
        animation-timing-function: ease-out;
        transform: translate(210px, 47px) rotate(-7deg);
    }
}
@keyframes dropping-tag-color-9 {
    0% {
        animation-timing-function: ease-in;
        opacity: 0;
        transform: translate(90px, -200px) rotate(0deg);
    }
    70% {
        animation-timing-function: ease-out;
        transform: translate(90px, 57px);
    }
    80% {
        animation-timing-function: ease-in;
        transform: translate(90px, 47px);
    }
    100% {
        animation-timing-function: ease-out;
        transform: translate(90px, 57px);
    }
}
@keyframes dropping-tag-color-10 {
    0% {
        animation-timing-function: ease-in;
        opacity: 0;
        transform: translate(180px, -200px) rotate(0deg);
    }
    70% {
        animation-timing-function: ease-out;
        transform: translate(180px, 30px);
    }
    80% {
        animation-timing-function: ease-in;
        transform: translate(180px, 20px);
    }
    100% {
        animation-timing-function: ease-out;
        transform: translate(180px, 30px);
    }
}

/* Падение блок 3 */
@keyframes dropping-tag-color-11 {
    0% {
        animation-timing-function: ease-in;
        opacity: 0;
        transform: translate(212px, -200px) rotate(0deg);
    }
    70% {
        animation-timing-function: ease-out;
        transform: translate(212px, 122px) rotate(5deg);
    }
    80% {
        animation-timing-function: ease-in;
        transform: translate(212px, 127px) rotate(10deg);
    }
    90% {
        animation-timing-function: ease-in;
        transform: translate(212px, 122px) rotate(5deg);
    }
    95% {
        animation-timing-function: ease-in;
        transform: translate(212px, 127px) rotate(10deg);
    }
    100% {
        animation-timing-function: ease-out;
        transform: translate(212px, 127px) rotate(10deg);
    }
}
@keyframes dropping-tag-color-12 {
    0% {
        animation-timing-function: ease-in;
        opacity: 0;
        transform: translate(94px, -200px) rotate(0deg);
    }
    70% {
        animation-timing-function: ease-out;
        transform: translate(94px, 129px) rotate(-21deg);
    }
    80% {
        animation-timing-function: ease-in;
        transform: translate(94px, 129px) rotate(-26deg);
    }
    90% {
        animation-timing-function: ease-in;
        transform: translate(94px, 132px) rotate(-21deg);
    }
    95% {
        animation-timing-function: ease-in;
        transform: translate(94px, 132px) rotate(-26deg);
    }
    100% {
        animation-timing-function: ease-out;
        transform: translate(94px, 132px) rotate(-26deg);
    }
}
@keyframes dropping-tag-color-13 {
    0% {
        animation-timing-function: ease-in;
        opacity: 0;
        transform: translate(203px, -200px) rotate(0deg);
    }
    70% {
        animation-timing-function: ease-out;
        transform: translate(203px, 123px) rotate(29deg);
    }
    80% {
        animation-timing-function: ease-in;
        transform: translate(203px, 118px) rotate(29deg);
    }
    90% {
        animation-timing-function: ease-in;
        transform: translate(203px, 118px) rotate(29deg);
    }
    95% {
        animation-timing-function: ease-in;
        transform: translate(203px, 118px) rotate(25deg);
    }
    100% {
        animation-timing-function: ease-out;
        transform: translate(203px, 118px) rotate(29deg);
    }
}
@keyframes dropping-tag-color-14 {
    0% {
        animation-timing-function: ease-in;
        opacity: 0;
        transform: translate(40px, -200px) rotate(0deg);
    }
    70% {
        animation-timing-function: ease-out;
        transform: translate(40px, 122px) rotate(-16deg);
    }
    80% {
        animation-timing-function: ease-in;
        transform: translate(40px, 114px) rotate(-13deg);
    }
    100% {
        animation-timing-function: ease-out;
        transform: translate(40px, 122px) rotate(-16deg);
    }
}
@keyframes dropping-tag-color-15 {
    0% {
        animation-timing-function: ease-in;
        opacity: 0;
        transform: translate(160px, -200px) rotate(0deg);
    }
    70% {
        animation-timing-function: ease-out;
        transform: translate(160px, 117px);
    }
    80% {
        animation-timing-function: ease-in;
        transform: translate(160px, 119px);
    }
    100% {
        animation-timing-function: ease-out;
        transform: translate(160px, 115px);
    }
}







@media(max-width: 699px){
    .products__banner {
        order: 1;
    }
    .products__product {
        order: 2;
    }
}