@media (max-width: 768px) {
  .hero h1 {
    font-size: 42px;
  }

  section h2 {
    font-size: 28px;
  }

  .countdown {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 420px) {
  .hero h1 {
    font-size: 34px;
  }

  .date {
    font-size: 18px;
  }

  .countdown span {
    font-size: 28px;
  }
}

@media (max-width: 768px) {
  .story {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .gallery-grid img,
  .gallery-grid img:first-child {
    height: 360px;
    grid-row: auto;
  }
}

@media (max-width: 768px) {
  .pagne-grid {
    grid-template-columns: 1fr;
  }

  .pagne-card img {
    height: 320px;
  }
}

@media(max-width:768px){

.family-grid{

grid-template-columns:1fr;

}

.family-heart{

transform:rotate(90deg);

margin:15px 0;

}

}

@media(max-width:768px){
  .program-card {
    grid-template-columns: 1fr;
    text-align: center;
  }
}