html,
body {
  height: 100%; /* Родители страницы занимают 100% высоты окна */
  margin: 0;
  padding: 0;
}

.page {
  display: flex; /* Flexbox для всей страницы */
  flex-direction: column; /* В колонку */
  height: 100%;
  /* min-height: 100vh; */
}

.page__content {
  display: flex;
  flex-direction: column;
  flex: 1; /* Это важно! Убедитесь, что page__content занимает 100% */
}

header,
footer {
  flex: 0 0 auto; /* Шапка и подвал занимают свою высоту */
}

main.blog {
  padding: 30px 0 30px;
  flex: 1; /* Занимаем всё оставшееся место */
}
@media (max-width: 1000px) {
  main.blog {
    padding: 30px 0 30px;
  }
}
main.blog ul {
  margin: 0;
  padding: 0;
}
main.blog ul li {
  list-style-type: none;
}
main.blog a {
  text-decoration: none;
  transition: all 0.3s ease-in-out;
  color: var(--gray1);
  opacity: 0.7;
  line-height: 22px;
  /* font-size: 20px; */
}
main.blog a:hover {
  transition: all 0.3s ease-in-out;
  opacity: 1;
}
.blog h1 {
  margin-bottom: 24px;
  word-break: break-all !important;
}