/* HP Only */
@media screen and (max-width: 1200px)  {

    .content-container {
        padding: 0 15px;
    }

    .site-drawer .drawer-content {
        width: 100%;
        height: 100%;
        background: black;
        top: 0;
        right: 0;
        transform: translateY(0);
        padding: 0 50px;
        border-radius: 0;
    }
    .site-drawer .drawer-content p {
        font-size: 16px;
    }   

    .site-drawer .drawer-content .item {
        padding: clamp(16px, 4vw, 45px) 25px;
    }    
    
    #home .sejarah .content p {
        text-align: justify;
        max-width: 100%;
        margin-left: 0;
    }
    #home .sejarah .content h1 {
        font-size: clamp(40px, 5vw ,60px);
        text-align: center;
    }
    #home section.sejarah .background-images .school{
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
    }
    #home .sejarah .content {
        padding: 75px 0;
        padding-bottom: 90vw;
    }

    /* VISI MISI */

    #home section.visimisi .content-container {
        flex-direction: column;
    }

    #home section.visimisi .content-container .title {
        text-align: center;
        font-size: clamp(40px, 5vw ,60px);
    }
    #home section.visimisi .logo-sman21 {
        width: 100%;
    }
    #home section.visimisi .logo-sman21 .img-container {
        max-width: none;
        width: 100%;
        height: auto;
        margin-left: 0;
    }
    #home section.visimisi .content {
        width: 100%;
        margin-bottom: 100px;
    }

    /* Kepemimpinan */
    #home section.kepemimpinan .body {
        flex-direction: column;
    }

    #home section.kepemimpinan .content .kolom {
        width: 100%;
    }    

    #home section.kepemimpinan .image-slider {
        aspect-ratio: 4/3;
    }

    /* Staff Guru */
    #home section.staffguru .content-container {
        flex-direction: column;
    }
    #home section.staffguru .content {
        width: 80%;
        margin-bottom: 50px;
    }
    #home section.staffguru .content a {
        width: 100%;
    }
    #home section.staffguru .content * {
        text-align: center;
    }    

    /* Siswa & Kelas */
    #home section.siswakelas .slider-kelas  {
        margin-top: 50px;
        aspect-ratio: 16/12;
        border: 5px solid white;
    }

    #home section.siswakelas .active-slider {
        margin-top: clamp(-20px, -10vw, -100px);
    }   
    
    /* Ekstrakulikuler */
    #home section.extrakulikuler h1.heading-vintage {
        text-align: center;
    }    
    #home section.extrakulikuler .swiper-wrapper .item img {
        border: 5px solid white;
    }

    /* Perpisahan */

    #home section.perpisahan .inner .item {
        border: 5px solid white ;
    }    





/* =============================== */
/* # STAFF AND GURU */
/* =============================== */


#staffguru .hero .image-slider {
    aspect-ratio: 16 / 12;
}

#staffguru .listguru .image-slider {
    aspect-ratio: 16 / 10;
}








/* =============================== */
/* # STAFF Single page */
/* =============================== */

#staff-single .staff-details .staff-image  {
    max-width: 400px;
}

#staff-single .staff-details .tv {
    max-width: 500px;
}


#staff-single .staff-details .info {
    margin-top: 70px;
    padding-left: 30px;
}
#staff-single .staff-details .info .breadcrumbs {
    text-align: center;
    margin-bottom: 20px;
}

#staff-single .staff-details .info .name,
#staff-single .staff-details .info .mapel {
    text-align: center;
    width: 100%;
} 



/* =============================== */
/* # Student Single page */
/* =============================== */

#student .student-details .info {
    padding-left: 15px;
}

#student .student-details .info .breadcrumbs {
    margin-bottom: 30px;
}







/* =============================== */
/* # Class Single page */
/* =============================== */


#class-single .hero .image-wrapper  {
    aspect-ratio: 16/12;
}

#class-single .walas .content-container {
    padding: 0 35px;
}

#class-single .walas .jabatan {
    top: -3%; left: -3%;
}


/* ====== */}