/* styles/main-content.css */
/* Универсальные стили для контейнера и сетки (не зависят от типа карточек) */

body {
  background-color: #E3E7EA;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* основной блок-обёртка для центрирования и фона */
.main-content-wrapper {
  flex: 1;
  background-color: #E3E7EA;
  width: 100%;
}

/* внутренний контейнер с ограничением максимальной ширины и центрированием */
.content-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 48px 60px;
  background-color: #E3E7EA;
}

/* универсальная сетка (адаптивная) */
.grid-eight {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* адаптивность сетки (не зависит от карточек) */
@media (max-width: 1100px) {
  .grid-eight {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  .content-container {
    padding: 40px 32px;
  }
}

@media (max-width: 760px) {
  .grid-eight {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .content-container {
    padding: 32px 20px;
  }
}

@media (max-width: 540px) {
  .grid-eight {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .content-container {
    padding: 24px 16px;
  }
}

/* фоны для хедера и футера (согласование с общим фоном) */
.header {
  background: #E3E7EA;
}

.footer {
  background: #F4F6F7;
}