@media (max-width: 340px) {
  html {
    font-size: 50%;
  }
}

@media (max-width: 260px) {
  * {
    word-wrap: break-word;
  }

  html {
    font-size: 40%;
  }
}

@media (max-width: 180px) {
  * {
    word-break: break-all;
  }

  html {
    font-size: 18%;
  }
}

@media (min-width: 500px) {
  .inbox-status-bar .inbox-status {
    min-width: 10rem;
  }

  .notifs-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
  }

  .no-notifs-heading {
    grid-column: 1/-1;
  }
}

@media (min-width: 768px) {
  html {
    font-size: 64%;
  }
}

@media (min-width: 1200px) {
}

@media (min-width: 1800px) {
  html {
    font-size: 75%;
  }
}

@media (min-width: 2100px) {
  html {
    font-size: 85%;
  }
}

@media (min-width: 2300px) {
  html {
    font-size: 95%;
  }
}

@media (min-width: 2500px) {
  html {
    font-size: 110%;
  }
}