body {
    background: 
        url('/images/bg3_m.jpg') left top repeat-x,
        #130a06;
}
h1 {
    font-size: 1.6rem;
    font-weight: bold;
    text-transform: uppercase;
}
h1 a {
    color: #372a25;
    text-decoration: none;
}
h2 {
    color: #960c1f;
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 1rem;
}
h3 {
    color: #940c1f;
    font-size: 1.3rem;
    font-weight: bold;
    margin: 0 0 0.5rem;
/*    text-transform: uppercase;*/
}
h4 {
    font-size: 1.1rem;
    font-weight: bold;
    margin: 0;
/*    text-transform: uppercase; */
}
.page-photo img {
/*    max-width: 288px;*/
}
.white-b .page-photo img {
/*    max-width: 248px;*/
}
.page-photo-title {
    font-size: 1rem;
    font-weight: bold;
    line-height: 120%;
    margin: 0.5rem 0 1rem;
}
.sec-b {
    
}
.bar {
    width: 100%;
}

/* === БАЗОВЫЕ СТИЛИ (мобильные) === */
.img-responsive,
.img-float-left,
.img-float-right {
    max-width: 100%;
    height: auto;
    display: block;
    margin-bottom: 1rem;
}

.photo-b,
.perf-main-photo-b {
    overflow: hidden; /* Или auto */
    display: flex;       /* Современный способ выстроить фото в колонку */
    flex-direction: column;
    gap: 1rem;           /* Отступ между фото */
}

/* Отступ для каждого фото-блока */
.page-photo {
    margin-bottom: 0; /* Отступы теперь управляются gap у родителя */
}


/* === Стили для модального окна === */
.modal-content-transparent {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Изображение внутри модалки */
.modal-image-display {
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 4px 30px rgba(0,0,0,0.6);
    margin: 0 auto;
    display: block;
}

/* ВАЖНО: Отключаем float для картинки ВНУТРИ модального окна, 
   чтобы она стояла по центру, даже если имеет класс img-float-left */
#imageModal .modal-image-display {
    float: none !important; 
    width: auto;
    max-width: 100%;
}

.modal-caption {
    color: #f4e6d4;
    font-size: 1rem;
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    background: rgba(0,0,0,0.6);
    border-radius: 4px;
    display: inline-block;
}

.perf-row {
    padding: 30px 20px;
    display: flex;
    flex-wrap: wrap;
}

.perf-row > [class*="col-"] {
    display: flex;
    flex-direction: column;
}

.perf-photo {
/*    margin-bottom: 30px;
    padding: 0 15px;*/
    height: 100%;
}

.perf-photo img {
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    background: #fff;
    padding: 5px;
    max-width: 100%;
    height: auto;
    display: block;
    width: 100%;
    object-fit: cover;
}


.no-photo {
    padding: 0 15px;
    height: 100%;
    background: #e4cda2;
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.no-photo img {
    box-shadow: none;
    border: none;
    padding: 0;
    opacity: 1;
    margin: 30px 0;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;

}

.perf-link-b {
    padding: 10px 15px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.perf-link-b a {
    font-size: 20px;
    font-weight: bold;
    text-decoration: underline;
    color: #1a1a1a;
    margin-bottom: 8px;
    display: block;
    line-height: 1.3;
}

.perf-link-b a:hover {
    color: #5a5a5a;
    text-decoration: underline;
}

.perf-link-b p {
    font-size: 14px;
    color: #555;
    margin: 0;
    line-height: 1.5;
}

.perf-brief {
    font-style: italic;
    margin-bottom: 20px;
}

.button-links {
    display: flex;
    justify-content: center;
    margin: 20px;
    text-align: center;
}

.button-links .button {
    margin: 0 20px;
/*    max-width: 30em;*/
} 

.text {
    margin-top: 30px;
}

.subsection {
    font-size: 1.1rem;
    margin: 30px 0 30px 20px;
} 

.subsection li {
    margin: 10px 0;
} 

.text li a {
    color: #372a25;
/*    font-weight: bold;*/
}


/* === 576px (sm) === */
@media (min-width: 576px) {    
  body {
    background: 
        url('/images/bg4_m.jpg') right top no-repeat,
        url('/images/bg3_m.jpg') left top repeat-x,
        #130a06;
  }
  h1 {
    font-size: 2.1rem;
  }
  h2 {
    font-size: 2.1rem;
  }
  h3 {
    font-size: 1.6rem;
  }
  h4 {
    font-size: 1.4rem;
  }
  .text {
    font-size: 1.2rem;
  }
  .subsection {
    font-size: 1.4rem;
  }
  .page-photo img {
/*    max-width: 505px;*/
  }
  .white-b .page-photo img {
/*    max-width: 369px;*/
  }
  .page-photo-title {
    font-size: 1.4rem;
  }
  .important {
      font-weight: bold;
  }
  .img-float-left {
      float: left;
      margin: 0 1.5rem 1rem 0;
  }
  .img-float-right {
    float: right;
      margin: 0 0 1rem 1.5rem;
  }    
  .modal-caption {
      font-size: 1.2rem;
  }
  .perf-link-b {
    padding: 10px 15px;
  }
  .no-photo {
    margin-bottom: 30px;
  }
  .perf-photo,
  .perf-link-b {
    margin-bottom: 30px;
  }
  .perf-link-b a {
    font-size: 14px;
  }
  .perf-link-b p {
    font-size: 12px;
  }

}

/* === 768px (md) === */
@media (min-width: 768px) {
  h1 {
    font-size: 2.8rem;
  }
  h2 {
    font-size: 2.5rem;
  }
  h3 {
    font-size: 1.6rem;
  }
  h4 {
    font-size: 1.5rem;
  }
  .text {
    font-size: 1.4rem;
  }
  .subsection {
    font-size: 1.6rem;
  }
  .page-photo img {
/*    max-width: 608px;*/
  }
  .white-b .page-photo img {
/*    max-width: 440px;*/
  }
  .page-photo-title {
    font-size: 2.2rem;
    letter-spacing: -2px;
  }
  .img-float-left {
    margin: 0 2rem 1.5rem 0;
  }   
  .img-float-right {
    margin: 0 0 1.5rem 2rem;
  }    
  .modal-caption {
    font-size: 1.3rem;
  }
  .perf-link-b a {
    font-size: 16px;
  }
  .perf-link-b p {
    font-size: 14px;
  }
}


/* === 992px (lg) === */
@media (min-width: 992px) {
/*  h1 {
    font-size: 3rem;
  }
  h2 {
    font-size: 2.7rem;
  }
  h3 {
    font-size: 2rem;
  }
  h4 {
    font-size: 1.8rem;
  }
  .text {
    font-size: 1.6rem;
  }
  .subsection {
    font-size: 1.8rem;
  }*/
  .page-photo img {
/*    max-width: 841px;*/
  }
  .white-b .page-photo img {
/*    max-width: 673px;*/
  }
  .img-float-left {
    margin: 0 2.5rem 1.5rem 0;
  }    
  .img-float-right {
    margin: 0 0 1.5rem 2.5rem;
  }
  .perf-link-b a {
    font-size: 18px;
  }
  .perf-link-b p {
    font-size: 16px;
  }
}

@media (min-width: 1020px) {
  body {
    background: 
        url('/images/bg4_d.jpg') center top no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 550'%3E%3Cpath d='M0,74 L90,0 L180,74 L180,550 L0,550 L0,74 Z' fill='%23a1885c'/%3E%3C/svg%3E") center bottom / 180px 550px repeat-x,
        #b5a279;
    position: relative;
    overflow-x: hidden; /* чтобы не было скролла от псевдоэлементов */
  }
  body::before,
  body::after {
    content: '';
    position: absolute;
    top: 0;
    height: 557px;
    width: max(0px, calc((100vw - 1920px) / 2)); /* ширина боковых областей */
    z-index: -1;
  }
  /* Левый фон — растягиваемый 1px с левого края */
  body::before {
    left: 0;
    background: url('/images/bg3_d.jpg') left top repeat-x;
  }
  /* Правый фон — растягиваемый 1px с правого края */
  body::after {
    right: 0;
    background: url('/images/bg3_d_r.jpg') right top repeat-x;
  }  
  .head {
    height: 466px;
  }
}


@media (max-width: 1199px) {
  .photo-b {
    margin-top: 2rem;
    order: 2;
  }
  .perf-main-photo-b {
    margin-top: 2rem;
  }
  .white-text-b {
    margin-top: 2rem;
  }
}

/* === 1200px (xl) === */
@media (min-width: 1200px) {
  .page-photo,
  .page-photo img,
  .perf-main-page-photo,
  .perf-main-page-photo img {
    float: none;
    margin: 0;      /* отступы задаёт gap родителя .photo-b */
    width: 100%;
  }
  .white-b .page-photo img {
/*    max-width: 292px;*/
  }
  .page-photo-title {
    font-size: 1rem;
    letter-spacing: -0.5px;    
  }
  .important {
      font-weight: normal;
  }
  .img-float-left {
    margin: 0 3rem 2rem 0;
  }    
  .img-float-right {
    margin: 0 0 2rem 3rem;
  }    
  .modal-caption {
    font-size: 1.4rem;
  }
  .perf-link-b a {
    font-size: 20px;
  }

}