.motifs {

  --motif-size: min(calc(100vw - 40px), 780px);
  width: calc(100% + 2 * var(--page-gutter));
  min-width: 0;
  margin-inline: calc(-1 * var(--page-gutter));

  padding-block: 8px;
  background: rgba(255,255,255,0.34);
}

@media (min-width: 700px) {
  .motifs { padding-block: 12px; }
}

@media (min-width: 1100px) {
  .motifs {
    --motif-size: min(90vw, 780px);
    padding-block: 16px;
  }
}

.motifs__slider {
  width: 100%;
  overflow: hidden;
}

@media (width < 768px) {
  .slideshow--motifs .slideshow__navigation {
    position: static;
    justify-content: space-between;
    margin-block: 24px 16px;
    margin-inline: var(--page-gutter);
    opacity: 1;
    pointer-events: auto;
  }

  .slideshow--motifs .slideshow__navigation button {
    pointer-events: auto;
  }
}

.motifs__slider .motif-slide {
  width: var(--motif-size);
  height: var(--motif-size);
}

.motif-slide__media {
  width: 100%;
  height: 100%;
}

.motif-slide__media img,
.motif-slide__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.motifs__slider:not(.swiper-initialized) {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.motifs__slider:not(.swiper-initialized) .swiper-wrapper { gap: 16px; }
.motifs__slider:not(.swiper-initialized) .motif-slide { scroll-snap-align: center; }

@media (width < 768px) {
  .motifs__slider:not(.swiper-initialized) .swiper-wrapper { gap: 20px; }
}