/* -------------------------------------------------------
 * Promo Banners Section
 * ----------------------------------------------------- */
.promo-banners {
  padding: 56px 0;
  background: #fff;
}

.promo-banners__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.promo-banners__card {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--color-bg-alt);
}

.promo-banners__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

@media (hover: hover) {
  .promo-banners__card:hover img {
    transform: scale(1.03);
  }
}

/* -------------------------------------------------------
 * Responsive
 * ----------------------------------------------------- */
@media (max-width: 900px) {
  .promo-banners__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .promo-banners__card:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .promo-banners {
    padding: 36px 0;
  }
  .promo-banners__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .promo-banners__card:last-child {
    grid-column: auto;
  }
}