.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0px;
    width: 70px;
    height: 70px;
    position: relative;
    transition: all 0.3s ease;
}

.wrapper {
    /* Membuat container relatif untuk positioning child elements */
    position: relative;
    /* Ukuran bisa disesuaikan sesuai kebutuhan */
    width: 70px; /* Sesuai dengan ukuran grid */
    height: 70px; /* Sesuai dengan ukuran grid */
}

.square {
    background: #BCFFDA;
    border-radius: 0px;
    opacity: 0;
    position: relative;
}

.s5 {
    position: absolute;
    width: 35px;
    height: 35px;
    background: #185634;
    border-radius: 0px;
    animation: move 3s infinite ease-in-out;
    top: 0;
    left: 0;
}

/* Keyframes untuk pergerakan kotak 5 */
@keyframes move {
    0% { top: 0; left: 0; }
    25% { top: 0; left: 35px; }
    50% { top: 35px; left: 35px; }
    75% { top: 35px; left: 0; }
    100% { top: 0; left: 0; }
}

/* Animasi visibilitas untuk masing-masing kotak */
.s1 { animation: fade1 6s infinite; }
.s2 { animation: fade2 6s infinite; }
.s3 { animation: fade3 6s infinite; }
.s4 { animation: fade4 6s infinite; }

@keyframes fade1 {
    20% { opacity: 1; }
    50% { opacity: 1; }
    65% { opacity: 0; }
}

@keyframes fade2 {
    40% { opacity: 1; }
    65% { opacity: 1; }
    70% { opacity: 0; }
}

@keyframes fade3 {
    75% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes fade4 {
    0%, 100% { opacity: 0; }
    75% { opacity: 1; }
    25% { opacity: 0; }
}