h1 {
  font-size: var(--font-size-48);
  font-weight: var(--font-weight-500);
  color: var(--color-title);
  margin: var(--size-md) 0;
  line-height: 1;
}

h2 {
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-400);
  color: var(--color-title);
  margin: var(--size-sm) 0;
  line-height: 1;
}

h3 {
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-500);
  color: var(--black);
}

h4 {
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-500);
  color: var(--black);
}

p,
li {
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-400);
  line-height: 1.75;
  color: var(--black);
}

b,
strong {
  font-weight: 600;
}

@media (max-width: 768px) {
  h1 {
    font-size: var(--font-size-24);
  }

  h2 {
    font-size: var(--font-size-20);
  }

  h3 {
    font-size: var(--font-size-20);
  }

  h4 {
    font-size: var(--font-size-16);
  }
  p,
  li {
    font-size: var(--font-size-14);
  }
}

.page-layout {
  padding: var(--size-xxxlg) 0;
  position: relative;
  min-height: 80vh;
}

@media (max-width: 768px) {
  .page-layout {
    padding: var(--size-lg) 0;
  }
}

.text-block {
  overflow-wrap: break-word;
}
.plain-text {
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-400);
  color: var(--black);
  line-height: 175%;
}

/* применяется к блокам с виджетами для скругления углов, цвета фона и теней */
.childlab-widget {
  padding: var(--size-xxlg);
  border-radius: var(--border-radius-widget);
  background-color: var(--bg-color-default);
  box-shadow: var(--box-shadow-default);
}

a.childlab-card-link,
a.childlab-card-link:link {
  height: 100%;
  width: 100%;
  color: initial;
  text-decoration: none;
  transition: opacity 0.3s ease; /* Плавный переход за 0.3 секунды */
}

a.childlab-card-link:hover {
  opacity: 0.6; /* Становится на 60% непрозрачным */
}

a.childlab-card-link:hover .childlab-image {
  transform: scale(1.05);
}

.square-container {
  width: 100%; /* Или 50%, или любая другая ширина */
  position: relative;
  height: 0;
  padding-bottom: 100%; /* Высота = Ширине */
  overflow: hidden;
  border-radius: 16px;
}

.square-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.flex-row-center {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 1rem;
}

.childlab-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

/* обрезает текст по ширине родительского контейнера */
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.truncate-multiline {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Number of lines to show */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis; /* Adds the ellipsis (...) */
}

/* Стили для текстов */
.childlab-text__meta {
  color: var(--color-meta);
  font-size: smaller;
}

.not-found-page {
  display: flex;
  flex-direction: column;
  gap: var(--size-xlg);
  margin: var(--size-xlg) auto;
  align-items: center;
}

.not-found-page h1{
  font-size: 200px;
  color:#5230D0;
}
.not-found-page h2{
  font-size: 48px;
  color: #111111;
}
.not-found-page p{
  font-size: 20px;
  color: #111111;
}

.not-found-page-link {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 12px 36px;
  text-decoration: none;
  background-color: #5230D0;
  color: var(--white);
  border-radius: 8px;
  width: fit-content;
  font-size: 24px;
  font-weight: 400;
}


.article-wrapper {
  background-image: linear-gradient(
      rgba(255, 255, 255, 0.5) 0,
      rgba(255, 255, 255, 1) 30%,
      var(--light-grey-1)
    ),
    url("../images/article-bg.jpg");
  background-repeat: no-repeat;
  background-size: contain, 100%;
  background-position:
    0 0,
    0 -20%;
}

@media (max-width: 768px) {
  .article-wrapper {
    background: var(--light-grey-1);
  }
}

.post-wrapper {
  background-image: linear-gradient(
      rgba(255, 255, 255, 0.5) 0,
      rgba(255, 255, 255, 1) 30%,
      var(--light-grey-1)
    ),
    url("../images/post-bg.jpg");
  background-repeat: no-repeat;
  background-size: contain, 100%;
}

@media (max-width: 768px) {
  .post-wrapper {
    background: var(--light-grey-1);
  }
}

.empty-wrapper {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
}

.empty-placeholder {
  display: flex;
  text-align: center;
  justify-content: center;
  font-size: var(--font-size-32);
  font-weight: var(--font-weight-400);
  color: var(--light-grey-2);
}

@media (max-width: 992px) {
  .empty-placeholder {
    font-size: var(--font-size-28);
  }
}

@media (max-width: 768px) {
  .empty-placeholder {
    font-size: var(--font-size-20);
  }
}

.articles-list {
  margin-top: var(--size-xlg);
}

.article-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.article-background::after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    rgba(255, 255, 255, 0.5) 0,
    rgba(248, 248, 248, 0.5) 20vh,
    rgba(248, 248, 248, 1) 70vh
  );
}

@media (max-width: 992px) {
  .articles-list {
    margin-top: var(--size-xs);
  }

  .article-background {
    display: none;
  }
}