:root {
  /* Менять цвет всех акцентных элементов сайта строго здесь: */
  --accent-color: #ff6600; 
  --accent-hover: #ff8533; 
}
.logo h1 {
    font-family: 'Renaissance', serif !important;
    font-weight: 400 !important; /* Убирает жирность, чтобы шрифт Renaissance включился */
    font-style: normal !important;
    line-height: 1.2; /* Делает аккуратный отступ между строками при переносе <br> */}
html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
@font-face {
    font-family: 'Renaissance'; /* Название, которое вы будете использовать в коде */
    src: url('/fonts/Renaissance.otf') format('woff2'),
         url('/fonts/Renaissance.otf.woff') format('woff');  
				
*, *:before, *:after {
  box-sizing: inherit;
}





.container {
  display: flex;
  flex-wrap: wrap; /* Разрешает перенос на новую строку */
  gap: 15px; /* Расстояние между блоками */
}

.box {
  flex: 1 1 200px; /* Растягивается, сжимается, но не становится меньше 200px */
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  text-align: center;
}
Используйте код с осторожностью.
Как это работает:
•	display: flex; выстраивает блоки в один ряд по умолчанию.
•	flex-wrap: wrap; заставляет блоки переходить на следующую строку, если они перестают помещаться в ширину экрана.
•	flex: 1 1 200px; — это сокращение для трех параметров: flex-grow (готовность расти), flex-shrink (готовность сжиматься) и flex-basis (базовый размер). В данном случае ширина блоков будет стремиться к 200px. При уменьшении экрана они будут сжиматься до этого предела, а затем аккуратно перенесутся на новую строку.
________________________________________
Если хотите, я могу показать другие варианты, например, с использованием CSS Grid (для более сложных сеток) или рассказать, как выровнять блоки по центру, когда они переходят на последнюю строку. Какой вариант вас больше интересует?
Вы сказали: "блок 1 картинка 1pic.jpg подпись под картинкой: книга1; блок2 картинка pic2.jpg подпись под картинкой: книга2;блок 3 картинка pic3.jpg подпись под картинкой: книга3;блок 4 картинка pic4.jpg подпись под картинкой: книга4. под каждым блоком кнопка заказать. цвет кнопки color: #fe890c"
блок 1 картинка 1pic.jpg подпись под картинкой: книга1; блок2 картинка pic2.jpg подпись под картинкой: книга2;блок 3 картинка pic3.jpg подпись под картинкой: книга3;блок 4 картинка pic4.jpg подпись под картинкой: книга4. под каждым блоком кнопка заказать. цвет кнопки color: #fe890c
14 июля 2026 г.
Вот готовое и современное решение. Для семантически правильной разметки карточек книг лучше всего использовать тег <figure> для картинки с подписью и <button> для кнопки.
1. HTML-разметка
Замените предыдущий код разметки на этот. Картинки, подписи и кнопки упакованы внутри каждого блока:
html
<div class="container">
  <!-- Блок 1 -->
  <div class="box">
    <figure>
      <img src="1pic.jpg" alt="Книга 1">
      <figcaption>книга1</figcaption>
    </figure>
    <button class="order-btn">Заказать</button>
  </div>

  <!-- Блок 2 -->
  <div class="box">
    <figure>
      <img src="pic2.jpg" alt="Книга 2">
      <figcaption>книга2</figcaption>
    </figure>
    <button class="order-btn">Заказать</button>
  </div>

  <!-- Блок 3 -->
  <div class="box">
    <figure>
      <img src="pic3.jpg" alt="Книга 3">
      <figcaption>книга3</figcaption>
    </figure>
    <button class="order-btn">Заказать</button>
  </div>

  <!-- Блок 4 -->
  <div class="box">
    <figure>
      <img src="pic4.jpg" alt="Книга 4">
      <figcaption>книга4</figcaption>
    </figure>
    <button class="order-btn">Заказать</button>
  </div>
</div>
Используйте код с осторожностью.
2. CSS-стили
Добавьте эти стили. Блоки превратятся в полноценные карточки товаров, которые будут автоматически переноситься при сужении экрана, а кнопки всегда будут прижаты к низу:
css
/* Контейнер для сетки */
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* Расстояние между карточками */
  padding: 20px;
}

/* Карточка книги */
.box {
  flex: 1 1 220px; /* Базовая ширина карточки 220px */
  display: flex;
  flex-direction: column; /* Элементы внутри карточки идут сверху вниз */
  justify-content: space-between; /* Кнопка всегда будет внизу карточки */
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Стили для изображений */
.box figure {
  margin: 0 0 15px 0;
  text-align: center;
}

.box img {
  max-width: 100%;
  height: auto; /* Адаптивная картинка */
  object-fit: contain;
  border-radius: 4px;
}

/* Подпись под картинкой */
.box figcaption {
  margin-top: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  text-align: center;
}

/* Кнопка "Заказать" */
.order-btn {
  background-color: #fe890c; /* Цвет кнопки по вашему запросу */
  color: white;
  border: none;
  border-radius: 4px;
  padding: 10px 15px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  width: 100%; /* Кнопка растягивается на всю ширину карточки */
  transition: background 0.2s ease;
}

/* Эффект при наведении на кнопку */
.order-btn:hover {
  background-color: #e07404; /* Чуть темнее при наведении */
}
Используйте код с осторожностью.
Хотите ли вы добавить эффект увеличения картинки при наведении курсора или сделать так, чтобы на мобильных экранах карточки выстраивались строго по две в ряд, а не по одной?
Вы сказали: "да"
да
14 июля 2026 г.
Отличный выбор, эти доработки сделают каталог гораздо более живым и удобным для мобильных пользователей.
Вот обновленный CSS-код. Добавьте его вместо предыдущего (HTML-разметка остается прежней):
css
/* Контейнер для сетки */
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* Расстояние между карточками */
  padding: 20px;
}

/* Карточка книги */
.box {
  /* calc((100% - 20px) / 2) заставляет карточки занимать ровно половину экрана минус gap */
  flex: 1 1 calc((100% - 20px) / 2); 
  max-width: calc((100% - 20px) / 2);
  display: flex;
  flex-direction: column; 
  justify-content: space-between; 
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  box-sizing: border-box; /* Чтобы padding не ломал сетку */
  overflow: hidden; /* Скрывает картинку, если она выходит за границы при увеличении */
}

/* Ограничитель для картинки, чтобы работал зум */
.img-wrapper {
  overflow: hidden;
  border-radius: 4px;
}

/* Стили для изображений + эффект увеличения */
.box figure {
  margin: 0 0 15px 0;
  text-align: center;
}

.box img {
  max-width: 100%;
  height: auto; 
  object-fit: contain;
  transition: transform 0.3s ease; /* Плавное увеличение */
}

/* Эффект увеличения картинки при наведении на ВСЮ карточку */
.box:hover img {
  transform: scale(1.08); /* Увеличение на 8% */
}

/* Подпись под картинкой */
.box figcaption {
  margin-top: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  text-align: center;
}

/* Кнопка "Заказать" */
.order-btn {
  background-color: #fe890c; 
  color: white;
  border: none;
  border-radius: 4px;
  padding: 10px 15px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  width: 100%; 
  transition: background 0.2s ease;
}

/* Эффект при наведении на кнопку */
.order-btn:hover {
  background-color: #e07404; 
}

/* Адаптивность для больших экранов (компьютеры и планшеты) */
@media (min-width: 768px) {
  .box {
    /* На больших экранах возвращаем сетку в 4 колонки */
    flex: 1 1 calc((100% - 60px) / 4);
    max-width: calc((100% - 60px) / 4);
  }
}
Используйте код с осторожностью.
Чтобы эффект увеличения работал идеально:
Рекомендуется обернуть тег <img> в HTML в дополнительный div с классом img-wrapper, чтобы картинка не вылезала за края карточки при увеличении. Вот так:
html
<figure>
  <div class="img-wrapper">
    <img src="1pic.jpg" alt="Книга 1">
  </div>
  <figcaption>книга1</figcaption>
</figure>
Используйте код с осторожностью.
Нужно ли настроить всплывающее окно (модалку) с формой заказа при клике на кнопку «Заказать», или вы планируете сделать переход на другую страницу?
Вы сказали: "Нужно ли настроить всплывающее окно (модалку) с формой заказа при клике на кнопку «Заказать». добавить эффект увеличения картинки при наведении"
Нужно ли настроить всплывающее окно (модалку) с формой заказа при клике на кнопку «Заказать». добавить эффект увеличения картинки при наведении
14 июля 2026 г.
Вот готовое комплексное решение, которое включает в себя эффект увеличения картинки и работающее всплывающее окно (модалку) с формой заказа при клике на кнопку.
Для работы модального окна мы добавим простой скрипт JavaScript.
1. HTML-разметка
Скопируйте этот код. Здесь добавлена обертка .img-wrapper для правильного зума картинок и сама структура модального окна в самом низу.
html
<div class="container">
  <!-- Блок 1 -->
  <div class="box">
    <figure>
      <div class="img-wrapper">
        <img src="1pic.jpg" alt="Книга 1">
      </div>
      <figcaption>книга1</figcaption>
    </figure>
    <button class="order-btn" data-book="книга1">Заказать</button>
  </div>

  <!-- Блок 2 -->
  <div class="box">
    <figure>
      <div class="img-wrapper">
        <img src="pic2.jpg" alt="Книга 2">
      </div>
      <figcaption>книга2</figcaption>
    </figure>
    <button class="order-btn" data-book="книга2">Заказать</button>
  </div>

  <!-- Блок 3 -->
  <div class="box">
    <figure>
      <div class="img-wrapper">
        <img src="pic3.jpg" alt="Книга 3">
      </div>
      <figcaption>книга3</figcaption>
    </figure>
    <button class="order-btn" data-book="книга3">Заказать</button>
  </div>

  <!-- Блок 4 -->
  <div class="box">
    <figure>
      <div class="img-wrapper">
        <img src="pic4.jpg" alt="Книга 4">
      </div>
      <figcaption>книга4</figcaption>
    </figure>
    <button class="order-btn" data-book="книга4">Заказать</button>
  </div>
</div>

<!-- Всплывающее окно (Модалка) -->
<div id="orderModal" class="modal">
  <div class="modal-content">
    <span class="close-btn">&times;</span>
    <h2>Оформление заказа</h2>
    <p>Вы заказываете: <strong id="modalBookTitle"></strong></p>
    <form id="orderForm">
      <input type="text" placeholder="Ваше имя" required>
      <input type="tel" placeholder="Телефон" required>
      <button type="submit" class="submit-btn">Отправить заказ</button>
    </form>
  </div>
</div>
Используйте код с осторожностью.
2. CSS-стили
Этот код отвечает за адаптивную сетку, красивый зум картинок без выхода за границы и стили всплывающего окна.
css
/* Базовые стили сетки */
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
}

/* Карточка книги */
.box {
  flex: 1 1 calc((100% - 20px) / 2); 
  max-width: calc((100% - 20px) / 2);
  display: flex;
  flex-direction: column; 
  justify-content: space-between; 
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  box-sizing: border-box;
}

/* ЭФФЕКТ УВЕЛИЧЕНИЯ КАРТИНКИ */
.box figure {
  margin: 0 0 15px 0;
  text-align: center;
}

.img-wrapper {
  overflow: hidden; /* Скрывает края картинки при увеличении */
  border-radius: 4px;
  background-color: #f9f9f9;
}

.box img {
  max-width: 100%;
  height: auto; 
  display: block;
  margin: 0 auto;
  transition: transform 0.4s ease; /* Плавный зум */
}

/* Активация зума при наведении на карточку */
.box:hover img {
  transform: scale(1.08); /* Увеличение на 8% */
}

.box figcaption {
  margin-top: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  text-align: center;
}

/* Кнопка Заказать */
.order-btn {
  background-color: #fe890c; 
  color: white;
  border: none;
  border-radius: 4px;
  padding: 10px 15px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  width: 100%; 
  transition: background 0.2s ease;
}

.order-btn:hover {
  background-color: #e07404; 
}

/* СТИЛИ ДЛЯ МОДАЛЬНОГО ОКНА */
.modal {
  display: none; /* По умолчанию скрыто */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Затемнение фона */
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: #fff;
  padding: 30px;
  border-radius: 8px;
  width: 90%;
  max-width: 400px;
  position: relative;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  box-sizing: border-box;
}

.close-btn {
  position: absolute;
  right: 15px;
  top: 10px;
  font-size: 28px;
  cursor: pointer;
  color: #aaa;
}

.close-btn:hover {
  color: #333;
}

/* Форма внутри модалки */
#orderForm {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 20px;
}

#orderForm input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}

.submit-btn {
  background-color: #fe890c;
  color: white;
  border: none;
  padding: 12px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 4px;
  cursor: pointer;
}

.submit-btn:hover {
  background-color: #e07404;
}

/* Адаптивность под ПК */
@media (min-width: 768px) {
  .box {
    flex: 1 1 calc((100% - 60px) / 4);
    max-width: calc((100% - 60px) / 4);
  }
}

/* Базовые стили сетки */
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
}

/* Карточка книги */
.box {
  flex: 1 1 calc((100% - 20px) / 2); 
  max-width: calc((100% - 20px) / 2);
  display: flex;
  flex-direction: column; 
  justify-content: space-between; 
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  box-sizing: border-box;
}

/* ЭФФЕКТ УВЕЛИЧЕНИЯ КАРТИНКИ */
.box figure {
  margin: 0 0 15px 0;
  text-align: center;
}

.img-wrapper {
  overflow: hidden; /* Скрывает края картинки при увеличении */
  border-radius: 4px;
  background-color: #f9f9f9;
}

.box img {
  max-width: 100%;
  height: auto; 
  display: block;
  margin: 0 auto;
  transition: transform 0.4s ease; /* Плавный зум */
}

/* Активация зума при наведении на карточку */
.box:hover img {
  transform: scale(1.08); /* Увеличение на 8% */
}

.box figcaption {
  margin-top: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  text-align: center;
}

/* Кнопка Заказать */
.order-btn {
  background-color: #fe890c; 
  color: white;
  border: none;
  border-radius: 4px;
  padding: 10px 15px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  width: 100%; 
  transition: background 0.2s ease;
}

.order-btn:hover {
  background-color: #e07404; 
}

/* СТИЛИ ДЛЯ МОДАЛЬНОГО ОКНА */
.modal {
  display: none; /* По умолчанию скрыто */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Затемнение фона */
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: #fff;
  padding: 30px;
  border-radius: 8px;
  width: 90%;
  max-width: 400px;
  position: relative;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  box-sizing: border-box;
}

.close-btn {
  position: absolute;
  right: 15px;
  top: 10px;
  font-size: 28px;
  cursor: pointer;
  color: #aaa;
}

.close-btn:hover {
  color: #333;
}

/* Форма внутри модалки */
#orderForm {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 20px;
}

#orderForm input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}

.submit-btn {
  background-color: #fe890c;
  color: white;
  border: none;
  padding: 12px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 4px;
  cursor: pointer;
}

.submit-btn:hover {
  background-color: #e07404;
}

/* Адаптивность под ПК */
@media (min-width: 768px) {
  .box {
    flex: 1 1 calc((100% - 60px) / 4);
    max-width: calc((100% - 60px) / 4);
  }
}




.header { /* или тот тег/класс, где лежит логотип */
  padding-top: 20px; /* Создаст гарантированный безопасный отступ от верхнего края */
  display: flex;
  align-items: center; /* Выровняет логотип по центру по вертикали */
}
@font-face {
    font-family: 'Renaissance'; /* Название шрифта (придумайте любое) */
    src: url('fonts/Renaissance.otf') format('woff2'),
         url('fonts/Renaissance.woff') format('woff');
    font-weight: 400; /* 400 — это обычный (Regular) вес */
    font-style: normal;
    font-display: swap; /* Защита от мигания текста при загрузке */
}

/* --- 2. Глобальный стиль для H1 --- */
h1{
  color: var(--accent-color) !important; /* Управление через var */
  font-family: 'Renaissance.otf', sans-serif !important; 
  font-size: 4vw !important;               
  line-height: 1.1 !important;             
  text-align: center !important;           
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.9) !important; 
}
p{
    color: var(--accent-color) !important;  
}

/* --- 3. Сброс стилей --- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  min-height: 100vh; 
  background:  
              url('img/fon1.jpg') no-repeat center center / contain;
  background-color: #111;
  background-attachment: fixed; 
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

/* --- 4. Трехколоночный контейнер --- */
.hero-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}
.hidden-field { display: none !important; }
.main-flex-container {
  display: flex;
  justify-content: space-between; 
  align-items: center; 
  width: 100%;
  gap: 40px;
}

/* --- 5. ЛЕВАЯ КОЛОНКА (Меню) --- */
.vertical-menu {
  flex: 1;
  max-width: 300px;
}

.vertical-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.vertical-menu a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  font-family: 'Renaissance.otf', sans-serif;
  color: #ffffff; 
  font-size: 1.8vw; 
  letter-spacing: 1px;
  white-space: nowrap; 
  padding-bottom: 4px;
  transition: transform 0.3s ease, color 0.3s ease;
}

.vertical-menu a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: var(--accent-color); /* Управление через var */
  transform: scaleX(0); 
  transform-origin: center center; 
  transition: transform 0.3s ease-in-out;
}

.vertical-menu a:hover {
  transform: translateX(8px); 
  color: var(--accent-color); /* Управление через var */
}

.vertical-menu a:hover::after {
  transform: scaleX(1); 
}

/* --- 6. ЦЕНТРАЛЬНАЯ КОЛОНКА --- */
.center-column {
  flex: 1.8; 
  display: flex;
  flex-direction: column;
  align-items: center; 
  margin-top: 60px;
 
  gap: 25px; 
}

.site-main-logo {
  max-width: 180px; 
  height: auto;
  display: block;
}

.feedback-form {
  width: 100%;
  max-width: 350px; 
  background: rgba(255, 255, 255, 0.05);
  padding: 25px;
  border-radius: 4px;
  border: 1px solid rgba(255, 102, 0, 0.3); 
  z-index: 2;
}

.feedback-form h3 {
  color: #ffffff;
  margin-bottom: 15px;
  font-size: 18px;
  text-align: center;
}

.feedback-form input,
.feedback-form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 12px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 102, 0, 0.4); 
  color: #fff;
  border-radius: 3px;
}

/* Кнопка формы */
.feedback-form button {
  width: 100%;
  padding: 12px;
  background: var(--accent-color) !important; /* Управление через var */
  border: none;
  color: #ffffff; 
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
}

.feedback-form button:hover {
  background: var(--accent-hover) !important; /* Управление через var */
  transform: translateY(-1px);
}

.site-title-container {
  width: 120%; 
  text-align: center;
}

/* --- 7. ПРАВАЯ КОЛОНКА (Фирмы) --- */
.partners-column {
  flex: 1;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  align-items: flex-end; 
  gap: 20px; 
}

.partner-logo {
  width: 140px; 
  height: auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 6px;
  border: 1px solid var(--accent-color) !important; /* Управление через var */
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.4); 
  opacity: 0.8;
  transition: opacity 0.3s, transform 0.3s, border-color 0.3s;
}

.partner-logo:hover {
  opacity: 1;
  border-color: var(--accent-hover) !important; /* Управление через var */
  transform: scale(1.05); 
}

.partner-logo img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}





/* --- 8. АДАПТИВНАЯ ВЕРСИЯ ДЛЯ МОБИЛЬНЫХ ТЕЛЕФОНОВ (до 768px) --- */
@media screen and (max-width: 768px) {
  h1{ font-size: 7.5vw !important }
  /* Переводим трехколоночный контейнер в один вертикальный столбик */
  .main-flex-container {
    flex-direction: column;
    align-items: center;
    gap: 35px; /* Задаем комфортные отступы между крупными блоками */
    padding: 10px;
  }

  /* 1. Меню (Первое по счету) */
  .vertical-menu {
    max-width: 100%;
    width: 100%;
    order: 1; /* Гарантирует, что меню будет в самом начале */
  }

  .vertical-menu ul {
    align-items: center; /* Центрируем пункты меню на экране телефона */
    gap: 15px;
  }

  .vertical-menu a {
    font-size: 5.5vw; /* Увеличиваем размер текста меню, чтобы по нему было удобно кликать пальцем */
    text-align: center;
  }

  /* 2. Центральная колонка (Логотип, форма и название сайта) */
  .center-column {
    max-width: 100%;
    width: 100%;
    order: 2; /* Располагается строго после меню */
    gap: 20px;
  }

  .site-main-logo {
    max-width: 140px; /* Немного уменьшаем верхнее лого на мобильных */
  }

  .feedback-form {
    max-width: 100%; /* Форма растягивается на всю доступную ширину телефона */
    padding: 20px;
  }

  .site-title-container {
    width: 100%;
  }

  .main-site-title {
    font-size: 8vw; /* Делаем славянский шрифт крупным и читаемым на узком экране */
  }

  /* 3. Логотипы фирм (В самом конце страницы) */
  .partners-column {
    max-width: 100%;
    width: 100%;
    order: 3; /* Спускаются вниз страницы */
    
    /* Перестраиваем логотипы в строчку с автоматическим переносом на новую строку */
    flex-direction: row; 
    flex-wrap: wrap; 
    justify-content: center; /* Центрируем их группу */
    align-items: center;
    gap: 15px; /* Расстояние между картинками-логотипами */
  }

  .partner-logo {
    width: 110px; /* Оптимальный размер логотипов фирм на смартфонах */
    justify-content: center; /* Выравниваем саму картинку внутри рамки по центру */
    opacity: 1; /* На телефонах нет курсора мыши, делаем их сразу яркими */
  }
}