/* Custom Card Layout Centering
   Ensures odd-numbered card rows are centered for visual balance
   ============================================================ */

/* Grid-8: Team Cards (5 cards - centers the last row) */
.grid-8 {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
}

.grid-8 .team_card {
  flex: 0 1 calc(33.333% - 22px);
  max-width: 330px;
}

/* Grid-3: Sponsor Logos (various counts) */
.grid-3 {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px 130px;
}

.grid-3 .sponsor-logo-link {
  flex: 0 1 calc(25% - 100px);
  min-width: 120px;
}

/* Grid-9: Award Cards (flexbox centered) */
.grid-9 {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
}

.grid-9 .award-card {
  flex: 0 1 calc(50% - 20px);
  max-width: 400px;
}

/* Grid-10: Prize Cards (3 columns, centered) */
.grid-10 {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
}

.grid-10 > * {
  flex: 0 1 calc(33.333% - 22px);
  min-width: 280px;
}

/* Grid-11: Record Cards (2 columns, centered) */
.grid-11 {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
}

.grid-11 .team-card {
  flex: 0 1 calc(50% - 20px);
  max-width: 500px;
}

/* Tablet Responsive (max-width: 991px) */
@media screen and (max-width: 991px) {
  .grid-8 .team_card {
    flex: 0 1 calc(50% - 16px);
  }

  .grid-3 {
    gap: 40px 80px;
  }

  .grid-3 .sponsor-logo-link {
    flex: 0 1 calc(33.333% - 55px);
  }

  .grid-9 .award-card {
    flex: 0 1 calc(50% - 16px);
  }

  .grid-10 > *,
  .grid-11 .team-card {
    flex: 0 1 calc(50% - 16px);
  }
}

/* Mobile Responsive (max-width: 767px) */
@media screen and (max-width: 767px) {
  .grid-8 .team_card,
  .grid-9 .award-card,
  .grid-10 > *,
  .grid-11 .team-card {
    flex: 0 1 100%;
    max-width: 100%;
  }

  .grid-3 {
    gap: 40px 60px;
  }

  .grid-3 .sponsor-logo-link {
    flex: 0 1 calc(50% - 30px);
  }
}

/* Mobile Small (max-width: 479px) */
@media screen and (max-width: 479px) {
  .grid-3 .sponsor-logo-link {
    flex: 0 1 100%;
    max-width: 200px;
  }
}