/**
 * @file
 * Course grid component styles.
 */

.course-grid__title {
  font-size: var(--font-size-h2-lg);
  letter-spacing: -1.6px;
}

.course-grid__items {
  gap: var(--grid-gap-md);
}

@media (max-width: 1024px) {
  .course-grid .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .course-grid .grid--4,
  .course-grid .grid--3 {
    grid-template-columns: 1fr;
  }

  .course-grid__items {
    gap: var(--grid-gap-sm);
  }
}