/* Skip sizes band. Cards come from assets/css/skip-card.css and the
   postcode checker from assets/css/booking-bar.css — both shared
   patterns enqueued alongside this component. */

.skip-sizes {
  background: var(--color-dark);
  border-top: 4px solid var(--color-primary);
  border-bottom: 4px solid var(--color-primary);
  padding-bottom: var(--space-5);
}

.skip-sizes__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  max-width: 22.5rem;
  margin-inline: auto;
  margin-top: -3rem;
}

/* Light variant — standalone cards section on inner pages (Prices) */
.skip-sizes--light {
  background: #fff;
  border-top: 0;
  border-bottom: 1px solid var(--color-border);
  padding-block: 3rem 4.5rem;
}

.skip-sizes--light .skip-sizes__grid { margin-top: 0; }

@media (min-width: 560px) {
  .skip-sizes__grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: none;
  }
}

@media (min-width: 768px) {
  .skip-sizes__grid { margin-top: -4rem; }

  .skip-sizes--light .skip-sizes__grid { margin-top: 0; }
}

@media (min-width: 1200px) {
  .skip-sizes__grid {
    grid-template-columns: repeat(4, 1fr);
    margin-top: -8.4375rem; /* cards straddle the hero above */
  }

  .skip-sizes--light .skip-sizes__grid { margin-top: 0; }
}