@charset "UTF-8";
/* Лента медиа: телефон — столбиком, md — 2 × 2, xl — 4 в ряд, шаг 8.
   --head — с шапкой (главная): телефон — табы по центру, лента через 40, кнопка под ней через 40;
   md — табы слева, кнопка справа, лента через 40; xl — через 48. Ряды через 16 / 24. */
.media-feed {
  padding-inline: 0.875rem;
}
@media (min-width: 768px) {
  .media-feed {
    padding-inline: 1.375rem;
  }
}
@media (min-width: 1280px) {
  .media-feed {
    padding-inline: 1.75rem;
  }
}
.media-feed__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
}
@media (min-width: 768px) {
  .media-feed__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1280px) {
  .media-feed__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.media-feed--head {
  display: grid;
  grid-template-areas: "filters" "list" "more";
  grid-template-columns: minmax(0, 1fr);
  row-gap: 2.5rem;
}
@media (min-width: 768px) {
  .media-feed--head {
    grid-template-areas: "filters more" "list list";
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}
@media (min-width: 1280px) {
  .media-feed--head {
    row-gap: 3rem;
  }
}
.media-feed--head .media-feed__list {
  grid-area: list;
  row-gap: 1rem;
}
@media (min-width: 768px) {
  .media-feed--head .media-feed__list {
    row-gap: 1.5rem;
  }
}
.media-feed__filters {
  display: flex;
  grid-area: filters;
  gap: 0.25rem;
  justify-content: safe center;
  margin-inline: -0.875rem;
  overflow-x: auto;
  padding-inline: 0.875rem;
}
@media (min-width: 768px) {
  .media-feed__filters {
    padding-inline: 1.375rem;
  }
}
@media (min-width: 1280px) {
  .media-feed__filters {
    padding-inline: 1.75rem;
  }
}
.media-feed__filters {
  scrollbar-width: none;
}
.media-feed__filters::-webkit-scrollbar {
  display: none;
}
@media (min-width: 768px) {
  .media-feed__filters {
    justify-content: flex-start;
    margin-inline: 0;
    padding-inline: 0;
  }
}
.media-feed__more {
  grid-area: more;
  justify-self: center;
}
@media (min-width: 768px) {
  .media-feed__more {
    justify-self: end;
  }
}