/*========================================
  Annual Calendar
========================================*/

.month-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:24px;
  margin-top:32px;
}

.month-card{
  background:#f8fafc;
  border:1px solid #d9e2ec;
  border-radius:14px;
  padding:22px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  transition:.2s;
}

.month-card:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}

.month-card h3{
  margin:0 0 16px;
  color:#1b4f9c;
  font-size:1.25rem;
  border-bottom:2px solid #e7edf5;
  padding-bottom:8px;
}

.month-card ul{
  margin:0;
  padding-left:18px;
}

.month-card li{
  margin:8px 0;
  line-height:1.7;
}

/*========================================
  Feature Event
========================================*/

.feature-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:28px;
  margin-top:30px;
}

.feature-card{
  background:#f8fafc;
  border:1px solid #d9e2ec;
  border-radius:14px;
  overflow:hidden;
  transition:.2s;
}

.feature-card:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}

.feature-card img{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-bottom:1px solid #d9e2ec;
}

.feature-card h3{
  padding:18px 22px 10px;
  margin:0;
  color:#1b4f9c;
}

.feature-card p{
  padding:0 22px 22px;
  margin:0;
  line-height:1.8;
}

@media (max-width:768px){

.month-grid,
.feature-grid{
  grid-template-columns:1fr;
}

.month-card{
  padding:18px;
}

.month-card h3{
  font-size:1.15rem;
}

.feature-card h3{
  padding:16px 18px 8px;
}

.feature-card p{
  padding:0 18px 18px;
}

}