@keyframes float {
    0% {
        transform: translatey(0px);
    }
    50% {
        transform: translatey(-5px);
    }
    100% {
        transform: translatey(0px);
    }
}

@keyframes floatMobile {
    0% {
        transform: translatey(0px) scale(0.5);
    }
    50% {
        transform: translatey(-5px) scale(0.5);
    }
    100% {
        transform: translatey(0px) scale(0.5);
    }
}

#slide {
    position: relative;
    z-index: 2;
    overflow-x: clip;

    .wrap {
        display: grid;
        gap: 100px;     
        position: relative;
    }

    .header {
        display: grid;
        jutify-content: center;
        text-align: center;
        gap: 24px;
        position: relative;
        z-index: 5;
    }

    .media-container {
        .media {
            overflow: hidden;
            position: absolute;
   
            @media only screen and (min-width: 980px) {
                transform: scale(1);
                animation: float 4s ease-in-out infinite;
            }

            @media only screen and (max-width: 980px) {
                transform: scale(0.5);
                animation: floatMobile 4s ease-in-out infinite;
            }

            img {
                height: 100%;
                object-fit: cover;
                width: 100%;
            }

            &[data-index="1"] {
                border-radius: 10px;
                height: 140px;
                left: -20%;
                top: -175px;
                width: 200px;  


                @media only screen and (max-width: 980px) {
                    left: 0%;
                }

            }

            &[data-index="2"] {
                border-radius: 18px;
                height: 240px;
                right: -20%;
                top: -200px;
                width: 200px;     

                @media only screen and (max-width: 980px) {
                    right: 0%;
                }
            }

            &[data-index="3"] {
                border-radius: 12px;
                height: 220px;
                left: -35%;
                top: 15%;
                width: 300px;     

                @media only screen and (max-width: 980px) {
                    left: -30%;
                }           
            }

            &[data-index="4"] {
                border-radius: 15px;
                height: 295px;
                right: -52%;
                top: 28%;
                width: 395px; 

                @media only screen and (max-width: 980px) {
                    right: -45%;
                }               
            }            

            &[data-index="5"] {
                border-radius: 18px;
                height: 220px;
                left: -15%;
                top: 88%;
                width: 220px;       

                @media only screen and (max-width: 980px) {
                    left: 0%;
                }             
            }

            &[data-index="6"] {
                border-radius: 18px;
                height: 200px;
                right: -35%;
                top: 95%;
                width: 170px;   

                @media only screen and (max-width: 980px) {
                    right: 0%;
                }                  
            }

        }      
    }

    .btn-wrap {
        text-align: center;
    }
}