/* ============================================
   ОБЁРТКА ГАЛЕРЕИ
   ============================================ */

.gallery-section {
  width: 100%;
  margin: 100px 0;
  box-sizing: border-box;
}

/* Внутренний контейнер — центрирует контент и задаёт общий левый край */
.gallery-inner {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 20px; /* ← защита от прилипания к краям на узких экранах */
  box-sizing: border-box;
}

.gallery-section *,
.gallery-section *::before,
.gallery-section *::after {
  box-sizing: border-box;
}


/* ============================================
   ГАЛЕРЕЯ
   ============================================ */

.gallery-container {
  display: flex;
  gap: 12px;
  width: 100%;
  /* max-width и margin больше не нужны — заданы на .gallery-inner */
}

.gallery-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.gallery-col-left,
.gallery-col-right {
  flex: 331 1 0;
  max-width: 331px;
}

.gallery-col-center {
  flex: 674 1 0;
  max-width: 674px;
}

.media-box {
  width: 100%;
  position: relative;
  overflow: hidden;
  background-color: #f0f0f0;
}

.media-box img,
.media-box iframe {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none;
}

.ratio-331-198  { aspect-ratio: 331 / 198; }
.ratio-331-408  { aspect-ratio: 331 / 408; }
.ratio-674-354  { aspect-ratio: 674 / 354; }
.ratio-331-228  { aspect-ratio: 331 / 228; }
.ratio-331-588  { aspect-ratio: 331 / 588; }


/* ============================================
   ПЛАНШЕТ: 1200px – 768px
   ============================================ */

@media (max-width: 1200px) {
  .gallery-container {
    flex-wrap: wrap;
  }

  .gallery-col-left,
  .gallery-col-right {
    flex: 1 1 calc(50% - 6px);
    max-width: none;
  }

  .gallery-col-center {
    flex: 1 1 100%;
    max-width: none;
    order: 3;
  }
}


/* ============================================
   МОБИЛЬНЫЕ: 768px и ниже
   ============================================ */

@media (max-width: 768px) {
  .gallery-section {
    margin: 60px 0;
  }

  .gallery-container {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .gallery-col-left,
  .gallery-col-center,
  .gallery-col-right {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    order: unset;
  }
}