*{

margin:0;

padding:0;

box-sizing:border-box;

font-family:Poppins,sans-serif;

}

body{

background:#F4FFF7;

}

/* Section */

.classes-section{

padding:80px 8%;

}

.classes-section h1{

text-align:center;

font-size:50px;

color:#2E7D32;

margin-bottom:15px;

}

.classes-section p{

text-align:center;

color:#666;

font-size:18px;

margin-bottom:50px;

}

/* Grid */

.classes-container{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(340px,1fr));

gap:35px;

}

/* Card */

.class-card{

background:white;

border-radius:25px;

overflow:hidden;

box-shadow:0 15px 35px rgba(0,0,0,.12);

transition:.4s;

}

.class-card:hover{

transform:translateY(-12px);

}

/* Image */

.image{

height:240px;

overflow:hidden;

}

.image img{

width:100%;

height:100%;

object-fit:cover;

transition:.4s;

}

.class-card:hover img{

transform:scale(1.08);

}

/* Content */

.content{

padding:25px;

}

.content h2{

color:#2E7D32;

margin-bottom:15px;

font-size:30px;

}

.age{

display:inline-block;

background:#E8F5E9;

padding:8px 15px;

border-radius:30px;

margin-bottom:20px;

color:#2E7D32;

font-weight:600;

}

.content p{

line-height:1.7;

color:#555;

margin-bottom:25px;

}

.info{

display:flex;

justify-content:space-between;

text-align:center;

margin-bottom:25px;

}

.info div{

background:#F7F7F7;

padding:18px;

border-radius:15px;

width:48%;

font-weight:600;

}

button{

width:100%;

padding:15px;

background:#2E7D32;

color:white;

border:none;

border-radius:50px;

cursor:pointer;

font-size:17px;

transition:.3s;

}

button:hover{

background:#1B5E20;

}

.empty{

text-align:center;

font-size:22px;

padding:50px;

grid-column:1/-1;

}