/*
Theme Name: Museum Kriulino
Theme URI: https://wpshop.ru/themes/reboot
Author: WPShop.biz
Author URI: http://wpshop.biz/
Template: reboot
Version: 1.0.0
*/

a.afoot {text-decoration: none;} 
a.afoot:hover {text-decoration: none;}

a.afourbl {text-decoration: none;} 

header.sub-menu {z-index: 1000001 !important;}
header.sub-menu {font-size: 12px;}

@media (max-width: 430px) {
header.sub-menu ul li{font-size: 11px !important;}
}
#clearfy-cookie {z-index: 100000 !important;}

.header-html-2 {
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
}

.custom-header-element {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.scrolltop {z-index: 10001 !important;}

@media (max-width: 430px) {
.section-block__title {padding-top: 20px;}
}

.site-footer-container {padding-top: 50px;}

/* Меню под шапкой */
.main-navigation-inner {background-color: #996633 !important;}

.verslab {background:#996633; width:100%;position:relative; text-transform: uppercase; font-weight: 600; height: 40px; padding-top: 8px;}
a.bt_widget-vi-on {color: #fff!important; text-decoration: none;}
a.bt_widget-vi-on:hover {color: #dd9933!important;}

.wcommunity_wrap  .wcommunity_colored {height: 400px !important;}

/* Подменю */
.top-menu ul li .sub-menu li>a, .top-menu ul li .sub-menu li>span, .main-navigation ul li .sub-menu li>a, .main-navigation ul li .sub-menu li>span, .footer-navigation ul li .sub-menu li>a, .footer-navigation ul li .sub-menu li>span {
font-size: 13px;
padding: 15px 15px;
}

/* Закругленные рубрики Убрать */
.card-slider__category {
border-radius: unset;
}

.post-card:not(.post-card--small) .post-card__category {
border-radius: unset;
}

.entry-image--full .entry-image__body .post-card__category a, .entry-image--fullscreen .entry-image__body .post-card__category a, .entry-image--wide .entry-image__body .post-card__category a {
border-radius: unset;
}
 
/* Фоновое видео */
.video80 {padding-top: 0px !important; padding-bottom: 0px !important;}

.card-slider-container-bgvid {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  z-index: 1;
  margin-bottom: 20px;
  width: 100%;
  min-height: 760px;
}
.title-bgvideo {font-size: 2.4em; font-family: PT Serif; text-shadow: 1px 1px 1px #333333;}

@media (min-width: 768px) {
  .card-slider-container-bgvid {
    margin-bottom: 0px;
  }
}
@media (min-width: 768px) {
  .card-slider-container-bgvid {
    min-height: 400px;
  }
}
.card-slider-container-bgvid:hover .card-slider-container-bgvid:hover {
  opacity: 0.5;
}

body.sidebar-none .card-slider-container-bgvid.full {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw) !important;
}

@media (max-width: 430px) {
	.title-bgvideo {font-size: 1.8em; text-shadow: 1px 1px 1px #333333;}
	.title-bgvideo {text-align: center;}
	.card-slider-container-bgvid {
	margin-bottom: -20px;
	margin-top: -20px;}
	
}

.video-bg {
    height: 760px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

@media (min-width: 1920px) and (max-width: 2560px){
	.video-bg {height: 960px;}
}
@media (min-width: 2560px) {
	.video-bg {height: 1240px;}
}

.video-bg video {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100vh;
    object-fit: cover;
}
.effects {
    position: absolute;
    object-fit: cover;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100vh;
    background-color: rgba(16, 16, 16, 0.4);
}
.video-bg__content {
    z-index: 2;
    color: #ffffff;
}

/* Стили для видео */
.video-responsive {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
margin-bottom: 20px;
}
.video-responsive iframe,
.video-responsive object,
.video-responsive embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/* Заголовок слайдера по центру */
.card-slider__body-inner {
text-align: center !important; float: none !important; padding-top: 10px !important;
}
.card-slider__button {
background: none !important;
color: #fff;
}

/* Кнопка на слайдере */
/* Стиль для кнопки */
.button-smotret {
    display: inline-block;
    padding: 10px 24px;
    border: 2px solid #fff; /* Белая обводка */
    border-radius: 6px; /* Уменьшенное закругление */
    color: #fff; /* Белый цвет текста */
    text-decoration: none; /* Убираем подчеркивание */
    font-size: 16px; /* Размер текста */
    font-weight: bold; /* Жирный текст */
    text-align: center; /* Выравнивание текста */
    background-color: transparent; /* Прозрачный фон */
    transition: all 0.3s ease; /* Анимация при наведении */
}

.button-smotret:hover {
    background-color: #fff !important; /* Белый фон при наведении */
    color: #996633; /* Цвет текста при наведении */
}

.button-smotret:active {
    background-color: #fff; /* Белый фон при нажатии */
    color: #996633; /* Цвет текста при нажатии */
    border-color: #fff; /* Сохраняем белую обводку */
}

@media (max-width: 430px) {
.button-smotret:hover {
    background-color: #fff !important; /* Белый фон при наведении */
    color: #996633; /* Цвет текста при наведении */
}

.button-smotret:active {
    background-color: #fff !important; /* Белый фон при нажатии */
    color: #996633; /* Цвет текста при нажатии */
    border-color: #fff; /* Сохраняем белую обводку */
}
}

/* Заголовок на слайдере */
.card-slider__title span {display: block; justify-content: center; float: none; color: #ffffff; text-shadow: 1px 1px 1px #333333;}


/* Иконка Слабовидящие */
.eye-icon img {
    width: 34px; /* Ширина иконки */
    height: 28px; /* Высота иконки */
    display: block; /* Убираем лишние отступы вокруг изображения */
    transition: transform 0.3s ease; /* Анимация при наведении */
}
	
/* Разбиваем страницу на 2 блока */
.colmuz {
  width: 50%;
  float: left;
  padding: 20px; padding-top: 0px !important;
}
@media (max-width: 600px) {
  .colmuz {
    width: 100%;
    float: none;
	padding: 5px; padding-top: 0px !important;
  }
}

/* Отступы внутри секций */
@media (min-width: 768px) {
.section-block, .section-html {padding-top: 50px; padding-bottom: 50px;}
}

/* Отступы внутри секций */
@media (max-width: 430px) {
.section-block, .section-html {padding-top: 30px; padding-bottom: 30px;}
}

/* Отступы на внутренних страницах */
.entry-content {padding-top: 30px; padding-bottom: 30px;}

@media (min-width: 768px) {
.entry-content {padding-top: 15px; padding-bottom: 15px;}
}

/* Фоновая картинка на главной */
.sect-afgan:before {
content: "";
position: absolute;
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw) !important;
height: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 0;
background-image: url(/wp-content/uploads/2025/02/bg-afgan-v3.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}

/* Дата в форме записи */
.wpcf7-date, .wpcf7-validates-as-date {
width: 400px !important;
}

/* Картинка на внутренних страницах Мобильная */
@media (max-width: 430px) {
	.entry-content .geroysvo img {width: 100% !important;}
}

/* Подвал */
.footer-widget:first-child {
  flex: 0 0 40%;
}
.footer-widget:nth-child(n+2) {
  flex: 0 0 calc((60% - 50px) / 2);
}

@media (max-width: 768px) {
  .footer-widget {flex: 0 0 100%;}
}

.site-footer-container, .site-footer {background:url('/wp-content/uploads/2024/12/bg-fire6.png') no-repeat bottom right; z-index: 10000;}
@media (max-width: 480px) {
	.site-footer-container, .site-footer {background:url('/wp-content/uploads/2024/12/bg-fire7.png') no-repeat bottom right; z-index: 10000;}
}

/*Социальные сети в подвале*/
@media (min-width: 768px) {
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
}
}

.site-footer .social-button {
background: #fff;
}

/* Секция События */

/* Экспозиции */
.section-exposition {
  width: 90%;
  position: relative;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 30px 0 60px 0;
  overflow: hidden;
}

/* Слайдер */
.exposition-slider {
  overflow: hidden;
  position: relative;
  flex: 1;
  margin-left: 300px; /* Отступ от декоративного изображения */
}

.slider-track {
  display: flex;
  gap: 20px; /* Отступ между изображениями */
  transition: transform 0.5s ease;
}
.slider-track {
  transition: transform 0.5s ease-in-out;
  will-change: transform;
}

.slider-track img {
  flex: 0 0 calc(55% - 20px); /* Размер изображений - половина ширины с отступами */
  width: 100%;
  max-height: 500px;
  object-fit: cover;
}

/* Заголовок на изображении */
.slider-item {
  position: relative;
  flex: 0 0 calc(55% - 20px); /* Ширина блока изображения */
  overflow: hidden;
}

.slider-item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.scale-exp {transition: 1s;}
.scale-exp:hover {transform: scale(1.1);}

.slider-title {
  position: absolute;
  top: 15px;
  left: 15px;
  color: #fff !important;
  padding: 10px 15px;
  font-size: 18px;
  text-decoration: none;
  transition: color 0.3s ease;
  z-index: 2;
  font-weight: 600;
  background: #dd9933;
}

.slider-title:hover {
  background: #996633;
  color: #fff;
}

/* Навигация стрелок */
.slider-navigation {
  position: absolute;
  bottom: 20px;
  right: 20px;
  display: flex;
  gap: 10px;
  z-index: 10;
}

.slider-prev,
.slider-next {
  background: #fff;
  color: #996633;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.slider-prev:hover,
.slider-next:hover {
  background: #dd9933;
}

/* Адаптив */
@media (max-width: 768px) {
  .slider-track img {
    flex: 0 0 80%;
    max-height: 300px;
  }

  .exposition-left-decoration img {
    width: 100px;
  }

  .exposition-slider {
    margin-left: 0px;
  }
}

@media (max-width: 430px) {
.section-exposition {width: 100%;}
	
.slider-title {
  padding: 5px 8px;
  font-size: 14px;
}
  .exposition-slider {
    overflow: hidden; /* Скрытие выходящих изображений */
    position: relative;
    width: 100%; /* Занимает всю ширину экрана */
    max-width: 100vw; /* Максимальная ширина - вся ширина экрана */
  }

  .slider-track {
  display: flex; /* Flexbox для упрощения работы с слайдами */
    width: 100%; /* Общая ширина трека */
    transition: transform 0.3s ease; /* Плавная прокрутка */
    will-change: transform; /* Оптимизация прокрутки */
}

  .slider-track img {
  flex: 0 0 100%; /* Каждое изображение занимает 100% ширины */
  width: 100%;
  height: auto; /* Сохраняем пропорциональность */
  object-fit: contain; /* Обеспечиваем пропорциональное уменьшение */
  object-position: center; /* Центрируем изображение */
  margin: 0 auto !important; /* Убираем смещение */
}
	
	.slider-item {
    flex: 0 0 100%; /* Каждый слайд занимает 100% ширины экрана */
    width: 100%; /* Явно задаем ширину слайда */
    box-sizing: border-box; /* Учитываем padding и border */
  }
	
	.slider-item img {
	display: block; /* Избегаем возможных смещений из-за inline-block */
    margin: 0 auto; /* Центрируем изображение внутри контейнера */
    width: 100%;
    height: auto; /* Сохраняем пропорции */
    object-fit: cover; /* Уменьшаем пропорционально */
    object-position: center;
  }

  .slider-navigation {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    gap: 10px;
    z-index: 10;
  }

  .slider-prev,
  .slider-next {
    background: #fff;
    color: #996633;
    border: none;
    padding: 5px 8px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.3s ease;
  }

  .slider-prev:hover,
  .slider-next:hover {
    background: #dd9933;
  }
}
/* Конец Экспозиции */

/* Лента времени Timeline */
.timeline {
  position: relative;
  overflow: hidden;
  padding-top: 40px; /* Отступ сверху */
  padding-bottom: 100px; /* Дополнительное пространство для кнопок */
}

.timeline-wrapper {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.timeline-wrapper2 {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 410px;
}

.timeline-track {
  display: flex;
  gap: 60px; /* Увеличенное расстояние между изображениями */
  transition: transform 0.5s ease;
}

.timeline-track {
  transition: transform 0.5s ease-in-out;
  will-change: transform;
}

.timeline-event {
  flex: 0 0 300px; /* Размер блока */
  text-align: center;
  position: relative;
}

.timeline-image {
  width: 100%; /* Заполнить ширину блока */
  aspect-ratio: 4 / 3; /* Соотношение сторон */
  object-fit: cover;
  margin: 0 auto 15px; /* Отступ между изображением и текстом */
}

.timeline-event h3 {
  margin: 10px 0;
  font-size: 26px;
}

.timeline-event p {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px; /* Отступ для кнопок */
}

/* Навигация */
.timeline-navigation {
  position: absolute;
  bottom: 60px; /* Расположение ниже текста */
  right: 20px;
  display: flex;
  gap: 20px; /* Расстояние между кнопками */
  z-index: 10;
}

.timeline-prev,
.timeline-next {
  background: #996633;
  color: #fff;
  border: none;
  padding: 12px 20px; /* Размер кнопок */
  cursor: pointer;
  transition: background 0.3s ease;
  font-size: 18px;
}

.timeline-prev:hover,
.timeline-next:hover {
  background: #dd9933;
}

.timeline-prev:active,
.timeline-next:active {
  background: #fff;
  color: #996633;
  border: 1px solid #996633;
}

/* Адаптивность */
@media (max-width: 768px) {
  .timeline-track {
    gap: 40px; /* Уменьшенное расстояние между изображениями на мобильных устройствах */
  }

  .timeline-event {
    flex: 0 0 250px;
  }

  .timeline-image {
    aspect-ratio: 4 / 3;
  }

  .timeline-prev,
  .timeline-next {
    padding: 10px 15px;
    font-size: 16px;
  }
}
/* Конец Лента времени Timeline */

/* Воины-интернационалисты */
.image-block {
    display: flex; /* Выравниваем изображения в ряд */
    flex-wrap: wrap; /* Позволяет переносить изображения на новую строку */
    gap: 10px; /* Отступ между изображениями */
    margin: 20px 0;
}

.image-block img {
    width: calc(45% - 10px); /* Два изображения на одной строке с отступами */
    height: auto; /* Сохраняем пропорции */
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Адаптивность для маленьких экранов */
@media (max-width: 768px) {
    .image-block img {
        width: calc(50% - 10px); /* Два изображения на одной строке */
    }
}

@media (max-width: 430px) {
    .image-block img {
        width: calc(100% - 5px); /* На узких экранах сохраняем 2 изображения в ряд */
    }
}

/* Секция про Афган */
.sect-center {height: 640px;}

.title-afg span {padding-top: 25%;}

@media (max-width: 430px) {
.title-afg span {padding-top: 50%;}
}

.medal-afgan {float: left; display: block; margin-right: 30px;}
.medal-afgan2 {float: none; display: block;}

/* Заголовок */
.sect-afgan .card-slider__title {
    margin-bottom: 20px; /* Отступ под заголовком */
    font-size: 2.4em; /* Размер шрифта заголовка */
    color: #ffffff; /* Цвет текста */
    text-align: center;
}

/* Кнопка */
.sect-afgan .card-slider__button {
    display: inline-block; /* Убедимся, что кнопка корректно отображается */
    padding: 10px 24px; /* Визуальное оформление кнопки */
    font-size: 1em; /* Размер текста кнопки */
    border-radius: 6px; /* Закругленные края */
    margin-top: 10px; /* Отступ сверху */
    background-color: transparent; /* Прозрачный фон */
    color: #fff; /* Белый текст */
    text-decoration: none; /* Без подчеркивания */
    border: 2px solid #fff; /* Белая рамка */
    transition: all 0.3s ease; /* Эффект при наведении */
}

/* Эффекты при наведении на кнопку */
.sect-afgan .card-slider__button:hover {
    background-color: #fff; /* Белый фон при наведении */
    color: #996633; /* Коричневый текст */
}

@media (max-width: 768px) {
    .sect-afgan .card-slider__title {
        font-size: 1.8em; /* Уменьшенный размер шрифта */
    }

    .sect-afgan .card-slider__button {
        font-size: 1em; /* Уменьшенный размер текста кнопки */
    }
.sect-center {width: 100% !important;}
}

.afgan-present {display: block; width: 100%; float: none; margin-top: 30px;}

/* Страница Экспозиции 2 столбика */
.exposition-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 20px;
}

/* Стилизация каждого блока экспозиции */
.exposition-item {
    background: #f9f9f9; /* Светлый фон */
    padding: 15px;
    text-align: center;
    border-radius: 0px; /* Скругление углов */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Легкая тень */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Анимация при наведении */
.exposition-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/* Изображение */
.exposition-item img {
    width: 100%; /* Заполнение контейнера */
    height: auto;
    border-radius: 0px; /* Скругление углов */
}

/* Заголовок */
.exposition-item h3 {
    margin: 15px 0 5px;
    font-size: 1.4em;
    color: #333;
}

/* Подзаголовок */
.exposition-subtitle {
    font-size: 1em;
    color: gray;
	margin-bottom: -10px !important;
}

.link-block {
    text-decoration: none; /* Убираем подчеркивание */
    color: inherit; /* Наследуем цвет текста */
    display: block; /* Ссылка охватывает весь блок */
}

.link-block .exposition-item {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.link-block:hover .exposition-item {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/* Адаптивная версия для мобильных устройств (одна колонка) */
@media (max-width: 768px) {
    .exposition-grid {
        grid-template-columns: 1fr; /* Один столбец */
    }
}

@media (max-width: 430px) {
.exposition-subtitle {
	margin-bottom: -10px !important;
	}
}
/* Конец Страница Экспозиции 2 столбика */

/* Страница Фотоальбом 4 столбика */
/* Основная сетка фотоальбома */
.photoalbum-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Четыре колонки */
    gap: 20px; /* Отступы между блоками */
    padding: 20px;
}

/* Карточка фотоальбома */
.photo-item {
    background: #ffffff; /* Белый фон */
    padding: 10px; /* Внутренний отступ */
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Легкая тень */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
    
    display: flex; /* Выравниваем элементы внутри */
    flex-direction: column; /* Все элементы идут сверху вниз */
    justify-content: flex-start; /* Заголовок и подзаголовок остаются внутри */
    height: 100%; /* Фиксируем высоту карточки */
}

/* Анимация при наведении */
.photo-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/* Фото внутри карточки */
.photo-item img {
    width: 90%; /* Уменьшаем размер фото */
    height: auto;
    display: block;
    margin: 0 auto; /* Центрируем изображение */
}

/* Заголовок фотоальбома */
.photo-item h3 {
    margin: 10px 0 5px;
    font-size: 1.1em; /* Уменьшаем размер заголовка */
    color: #333;
}

/* Подзаголовок (дата события) */
.photo-date {
    font-size: 0.9em;
    color: gray;
    margin-top: 5px;
}

/* Делаем всю ссылку кликабельной */
.photo-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none; /* Убираем подчеркивание */
    color: inherit; /* Наследуем цвет текста */
    width: 100%;
    height: 100%;
}

/* Адаптивная версия */
@media (max-width: 1024px) {
    .photoalbum-grid {
        grid-template-columns: repeat(2, 1fr); /* Две колонки на планшетах */
    }
}

@media (max-width: 768px) {
    .photoalbum-grid {
        grid-template-columns: 1fr; /* Одна колонка на мобильных устройствах */
    }
}

@media only screen and (max-width: 480px) { 
 .gallery-columns-4 .gallery-item { 
   width: 50%; max-width: 50%;
  } 
}
/* Конец Страница Фотоальбом 4 столбика */

/* Лайтбокс по центру */
@media (max-width: 767px) {
.wpshoplightbox--open .wpshoplightbox-image {
top: 50%;
transform: translate(0%, -50%);
}
}


/* Секция 4 блока */
.section-block.four-columns {
  padding-top: 100px;
  padding-bottom: 0px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap; /* Для адаптивности */
  gap: 20px; /* Расстояние между блоками */
}

/* Блок */
.block-item {
  flex: 1 1 calc(25% - 20px); /* Каждый блок занимает 25% ширины с отступами */
  display: flex;
  flex-direction: column; /* Внутренние элементы располагаются вертикально */
  align-items: center; /* Центрируем содержимое по горизонтали */
  text-align: center;
  padding: 10px; /* Внутренние отступы для эстетики */
  box-sizing: border-box; /* Учитываем отступы в размере */
}

/* Изображение */
.block-item img {
  width: 150px; /* Размер изображения */
  height: auto; /* Сохраняем пропорции */
  margin-bottom: 0px; /* Расстояние до заголовка (в 2 раза больше, чем до подзаголовка) */
}

/* Заголовок */
.block-item h4 {
  font-size: 1.2em;
  margin-bottom: 12px; /* Расстояние до подзаголовка */
}

/* Подзаголовок */
.block-item .subtitle {
  font-size: 0.9em;
  color: gray;
}

/* Адаптивность */
@media (max-width: 430px) {
  .block-item {
    flex: 1 1 100%; /* Блок занимает 100% ширины */
    margin-bottom: 20px; /* Отступ между блоками */
  }
  .block-item img {width: 50%;}
}

/* Фото на странице О проекте */
/* Сетка для фотографий (4 колонки) */
.photo-grid-proj {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 равные колонки */
    gap: 20px; /* Отступы между фото */
    margin: 20px 0; /* Отступ сверху и снизу */
}

/* Фото внутри блока */
.photo-item-proj img {
    width: 100%; /* Заполнение по ширине блока */
    height: auto;
    display: block;
    border-radius: 0px; /* Скругление углов (можно убрать) */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Легкая тень */
}

/* Пустые блоки */
.photo-item-proj.empty-proj {
    background: none;
}

/* Адаптивность (на планшетах 2 колонки) */
@media (max-width: 1024px) {
    .photo-grid-proj {
        grid-template-columns: repeat(2, 1fr);
    }
    .photo-item-proj.empty-proj {
        display: none; /* Скрываем пустые блоки на маленьких экранах */
    }
}

/* Адаптивность (на мобильных в 1 колонку) */
@media (max-width: 768px) {
    .photo-grid-proj {
        grid-template-columns: 1fr;
    }
}

/* Страница Руководители школы */
/* Карточка директора */
.director-card {
    background: #f9f9f9;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
}

/* Фото директора */
.director-card img {
    width: 100%; /* Адаптивная ширина */
    max-width: 200px; /* Ограничение по размеру */
    height: auto;
    border-radius: 10px; /* Скругленные углы */
    margin-bottom: 10px;
}

/* Анимация при наведении */
.director-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}