/* Base: use our CSS var (won’t change between slides) */
.swiper {
  width: 100vw;
  height: var(--gallery-height);
  overflow: hidden;
  position: relative;
}

/* Desktop override: full‑screen 100vh */
@media (min-width: 769px) {
  .swiper {
    height: 100vh !important;
  }
}

/* The rest (identical for both) */
.swiper-wrapper {
  display: flex;
}
.swiper-slide {
  flex: 0 0 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
}
.swiper-slide.landscape img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.swiper-slide.portrait img {
  width: auto;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}
.swiper-button-next,
.swiper-button-prev,
.swiper-pagination {
  color: #fff;
  z-index: 10;
}

/* (Optional) hide arrows & dots on mobile if you prefer */
@media (max-width: 768px) {
  .swiper-button-next,
  .swiper-button-prev,
  .swiper-pagination {
    display: none;
  }
}

/* ─── Force every slide to exactly the viewport width ─── */
.swiper-slide {
  /* override the inline style that Swiper set */
  width: 100vw !important;
  flex: 0 0 100vw !important;
  max-width: 100vw !important;
}

/* (A) default assume desktop: show slider, hide grid */
.gallery-slider { display: block; }
.gallery-grid   { display: none; }

/* (B) mobile phones: hide slider, show grid */
@media (max-width: 768px) {
  .gallery-slider { display: none; }
  .gallery-grid   {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 1rem;
    padding: 1rem;
  }
  .gallery-grid img {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
  }
}