.related-articles {
  grid-column: 1 / 4;

  display: flex;
  flex-direction: column;
  row-gap: 2rem;
}
section.article-big .related-articles {
  padding: 0 var(--article-big-padding-side);
}

.related-articles h3, .related-articles h2 {
  grid-column: 1 / -1;
  grid-row: 1 / 2;

  font-size: var(--font-size-articles-head);
}

.related-articles .articles {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  column-gap: 1rem;
  row-gap: 1rem;
}

.related-articles .articles a h3:hover {
  color: var(--color-font-hover);
}

.related-articles .articles div img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin-bottom: 0;
  border-radius: 5px;
}

.related-articles .articles div a.tag {
  font-size: 0.6rem;
  font-weight: normal;
  text-transform: uppercase;
  color: var(--color-font);
  position: relative;
  width: fit-content;
  letter-spacing: 0.1rem;
  margin: var(--related-articles-margin) 0;
}

.related-articles .articles div a.tag::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-crazy);
  transition: height 0.4s;
}

.related-articles .articles div h3 {
  font-size: 1.2rem;
  margin: var(--related-articles-margin) 0;
}

.related-articles .articles div p {
  margin-top: var(--related-articles-margin);
}



/* Loading */
.related-article.loading a.image,
.related-article.loading h3,
.related-article.loading p {
  background-color: var(--color-separator);
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, .5) 50%,
    rgba(255, 255, 255, 0) 60%
  ) var(--color-separator);
  background-size: 200% 100%;
  background-position-x: 180%;
  animation: 1s loading ease-in-out infinite;
}

@keyframes loading {
  to {
    background-position-x: -20%;
  }
}


.related-article.loading a.image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: 5px;
}

.related-article.loading h3 {
  min-height: 1.6rem;
  border-radius: 5px;
  animation-delay: .05s;
}

.related-article.loading p {
  min-height: 4rem;
  border-radius: 5px;
  animation-delay: .06s;
}



/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .related-articles .articles {
    grid-template-columns: repeat(2, 1fr);
  }
  .related-articles .articles div img {
  aspect-ratio: 4 / 3;
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  main.article-big .related-articles {
    --article-big-padding-side: 10%;
  }

  .related-articles .articles {
    grid-template-columns: repeat(4, 1fr);
  }
    .related-articles .articles div img {
  aspect-ratio: 4 / 3;
}