/* 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: repeat(2, 1fr);
    max-width: none;
  gap: var(--space-2);
  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: 768px) {
  .skip-sizes__grid { margin-top: -4rem; }

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

}

@media (max-width: 440px) {
	
.skip-card {
    padding: 10px;!important;
}
	.skip-card__price {
    margin-top: 0.2rem;
    font-size: 1.6rem;
	}
	.skip-card__media {
    height: 4.3rem;
    margin-bottom: 0;
}
	.span__btn {
    height: 2.25rem;
    margin-top: 0.5rem;
	}
}

@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; }
}