/* ==========================================================
   L'ART — ONTWERPSERVICES
========================================================== */

.lart-packages {
  background: var(--lart-background);
  overflow: hidden;
}

.lart-packages-header h2 {
  font-size: 38px !important;
  line-height: 1 !important;
}

.lart-packages-header > p:last-child {
  max-width: 720px;
  margin-inline: auto;
  font-size: 15px;
  line-height: 1.65;
}

.lart-packages-track {
  width: 100%;
  margin-inline: auto !important;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem) 0.5rem;
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  gap: 1rem;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}


.lart-packages-track::-webkit-scrollbar { display: none; }

.lart-package {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  flex: 0 0 420px;
  width: 420px;
  min-width: 420px;
  max-width: 420px;
  height: 450px;
  min-height: 450px;
  max-height: 450px;
  margin: 0 !important;
  background: #ddddd5;
  color: #262727;
  overflow: hidden;
}

.lart-package.featured {
  background: #452c42;
  color: #efefef;
}

.lart-package-image {
  width: 100%;
  aspect-ratio: 4 / 2.25;
  margin: 0 !important;
  overflow: hidden;
  flex: 0 0 auto;
}

.lart-package-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

.lart-package-body {
  flex: 1;
  padding: 1.35rem 1.35rem 1.35rem;
  display: flex;
  flex-direction: column;
}

.lart-package h3 {
  margin: 0 0 0.85rem !important;
  color: inherit !important;
  font-size: 18px !important;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
}

.lart-package p {
  margin: 0 0 1.25rem !important;
  color: inherit !important;
  font-size: 13px !important;
  line-height: 1.6;
}

.lart-package .wp-block-buttons {
  margin-top: auto !important;
}

.lart-package:not(.featured) .wp-block-button__link {
  min-height: 42px;
  padding: 0.78rem 1.1rem;
  background: #452c42 !important;
  color: #EFEFEF !important;
  border-color: #2d4237 !important;
  font-size: 13px !important;
}

.lart-package.featured .wp-block-button__link {
  min-height: 42px;
  padding: 0.78rem 1.1rem;
  background: #ddddd5 !important;
  color: #452c42 !important;
  border-color: #452c42 !important;
  font-size: 13px !important;
}

@media (max-width: 620px) {

  .lart-packages-track {
    justify-content: flex-start;

    gap: 14px;

    padding:
      0
      1.25rem
      1rem;
  }

  .lart-package {
    flex: 0 0 min(340px, 82vw) !important;

    width: min(340px, 82vw) !important;
    min-width: min(340px, 82vw) !important;
    max-width: min(340px, 82vw) !important;

    height: 450px !important;
    min-height: 450px !important;
    max-height: 450px !important;

    border-radius: 12px !important;
    
    box-shadow: 0 8px 20px rgba(38, 39, 39, 0.14) !important;

    overflow: hidden;

    scroll-snap-align: start;
  }
}