/* Экстра-мелкие мобильные (до 375px) */
@media (max-width: 375px) {
  #slider-point {
    display: none;
  }
  .content-center {
    margin-top: 0px;
    height: 40vh;
  }
  .content-title {
    margin: 0 0 0 2.125rem;
  }
  .line {
    margin-left: 0.125rem;
    margin-right: 0.125rem;
  }
  .filter-posts {
    padding-left: 3.125rem;
    padding-right: 0px;
  }
  .picture-wrapper img {
    width: 11.3125rem;
    height: 8.25rem;
  }
  .post {
    margin-left: 2rem;
    height: 21.3125rem;
    width: 80%;
  }
  .posts a {
    width: 150%;
  }
  .post-text > p {
    font-size: 8px;
  }

  /* detail post */
  .slider {
    display: none;
  }
  .wrapper {
    flex-direction: column-reverse;
  }
  .author {
    margin-right: 0px;
  }
  .author-picture {
    margin: 0;
  }
  .author-name {
    font-size: 8px;
    margin: 0;
  }
  .date-created {
    font-size: 8px;
    margin: 0;
  }
  .text-post {
    margin: 0;
  }

  /* profile */

  .title {
    width: 100%;
    text-align: center;
    margin: 0;
  }
  .stats-container {
    flex-direction: column;
  }
  .text-post {
    margin: 0 auto;
  }
  .base-info {
    width: 100%;
  }
  .base-info > p {
    text-align: center;
  }
  .security-setting {
    width: 100%;
  }
  .security-setting > h3 {
    margin-top: 10px;
    text-align: center;
  }
  .stat-item {
    margin-top: 10px;
    justify-content: center;
  }
}

/* Мелкие мобильные (376px – 479px) */
@media (min-width: 376px) and (max-width: 479px) {
  #slider-point {
    display: none;
  }
  .post {
    margin: 0.75rem 0  0 2.75rem;
  }
  .content-title {
    margin: 0 0 0 4.125rem;
  }
  .line {
    margin-left: 4.125rem;
    margin-right: 5.125rem;
  }
  .filter-posts {
    padding-left: 4.125rem;
    padding-right: 8.125rem;
  }
}

/* Мобильные (480px – 767px) */
@media (min-width: 480px) and (max-width: 767px) {
  /* Общие стили для всех мобильных устройств от 480px */
  #slider-point {
    display: none;
  }
  .post {
    margin: 0.75rem 0  0 2.75rem;
  }
  .content-title {
    margin: 0 0 0 4.125rem;
  }
  .line {
    margin-left: 4.125rem;
    margin-right: 5.125rem;
  }
  .filter-posts {
    padding-left: 4.125rem;
    padding-right: 8.125rem;
  }

  /* Стили, специфичные для диапазона 480–767px */
  /* Здесь можно добавить уникальные правила, если нужны */
}

/* Планшеты (768px – 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  .content-bg {
    display: block; /* Показываем фон на планшетах */
  }
  .content-head p {
    font-size: 14px;
  }
  .content-head h3 {
    font-size: 24px;
  }
}

/* Ноутбуки (992px – 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
  .posts {
    grid-template-columns: repeat(2, minmax(auto, 600px));
  }
  .content-slider img {
    height: 80%;
  }
  .content-center {
    height: 50vh;
  }
  .slider-btn {
    top: 35%;
  }
  .slider {
    flex: 1;
    width: 32.0625rem;
  }
  .slide img {
    width: 90%;
    height: 290px;
  }
  .next {
    right: 57px;
  }
}

/* Большие десктопы (1200px – 1439px) */
@media (min-width: 1200px) and (max-width: 1439px) {
  .slider {
    width: 32.0625rem;
  }
  .slide img {
    height: 400px;
  }
}

/* Очень большие экраны (1440px – 1640px) */
@media (min-width: 1440px) and (max-width: 1640px) {
  .posts {
    grid-template-columns: repeat(3, minmax(auto, 600px));
  }
  .slider {
    width: 42.0625rem;
  }
}

/* Сверхбольшие экраны (1641px+) */
@media (min-width: 1641px) {
  .slider {
    width: 50.0625rem;
  }
}