*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, sans-serif;
}


body{

    background:linear-gradient(
        135deg,
        #111827,
        #374151,
        #111827
    );

    min-height:100vh;
    padding:30px;

}


/* JUDUL */

.header{

    text-align:center;
    margin-bottom:30px;
    color:white;

}


.header h1{

    font-size:40px;
    text-shadow:0 3px 10px #000;

}


.header p{

    margin-top:10px;
    font-size:18px;

}



/* GRID */

.container{

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:20px;

}



/* CARD */


.card{

    background:black;

    border-radius:15px;

    overflow:hidden;

    box-shadow:
    0 10px 20px rgba(0,0,0,.3);

    transition:.3s;

}


.card:hover{

    transform:translateY(-8px);

}



/* GAMBAR */


.card img{

    width:100%;
    
    height:150px;

    object-fit:fill;
}



/* ISI */

.content{

    padding:15px;

}


.content h2{

    color:white;

    font-size:20px;

    margin-bottom:10px;

}


.content p{

    font-size:14px;

    color:white;

    line-height:1.5;

}
.desc {
    font-weight: bold;
}


/* HP */

@media(max-width:700px){


.container{

    grid-template-columns:repeat(2,1fr);

}


.header h1{

    font-size:28px;

}
.desc {
    font-weight: bold;
}

}