.guide-index {
  max-width: 1120px;
}

.guide-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px;
}

.guide-card {
  display: flex;
  min-width: 0;
  height: 100%;
  flex-direction: column;
}

.guide-card > a:first-child {
  display: block;
  height: 220px;
  overflow: hidden;
  background: var(--cream);
}

.guide-card > a:first-child img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}

.guide-card > div {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.guide-card h2 {
  font-size: clamp(26px, 3vw, 34px);
}

.guide-card span {
  flex: 1;
}

.guide-card .primary-link {
  align-self: flex-start;
}

@media (max-width: 760px) {
  .guide-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 520px) {
  .guide-grid {
    grid-template-columns: 1fr !important;
  }

  .guide-card > a:first-child {
    height: clamp(210px, 58vw, 300px);
  }
}