/* Page heading band */
.page-heading {
  background: linear-gradient(90deg, var(--green-deep), var(--green-primary));
  padding-block: 48px;
  color: var(--white);
}
.page-heading .eyebrow {
  color: var(--green-light);
}
.page-heading h1 {
  color: var(--white);
  font-size: 2.4rem;
  margin-top: 6px;
}

@media (max-width: 760px) {
  .page-heading h1 { font-size: 1.8rem; }
}

.tracksuits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.tracksuit-card {
  aspect-ratio: 3 / 4;
  background: var(--gray-light);
  border: 1px solid var(--gray-border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  box-sizing: border-box;
  transition: transform var(--transition), box-shadow var(--transition);
}

.tracksuit-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 30px rgba(20, 51, 31, 0.12);
}

.tracksuit-card img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

@media (max-width: 1100px) {
  .tracksuits-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 760px) {
  .tracksuits-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}

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

/* ==========================================================================
   Additional Responsive Rules (Tracksuits Page)
   ========================================================================== */

/* Tablet: 1024px and below (heading consistency ke liye) */
@media (max-width: 1024px) {
  .page-heading { padding-block: 40px; }
  .page-heading h1 { font-size: 2.1rem; }
}

/* Small mobile: 480px and below */
@media (max-width: 480px) {
  .page-heading { padding-block: 32px; }
  .page-heading h1 { font-size: 1.5rem; }

  .tracksuits-grid { gap: 14px; }
  .tracksuit-card { padding: 8px; }
}