@media only screen and (max-width:1024px) {
  .head-text .head {
    font-size: 1.8em;
  }

  .blogs .empty h1 {
    font-size: 100px;
  }

  .blogs .empty h3 {
    font-size: 20px;
  }
}

@media screen and (max-width: 650px) {
  .head-text .head {
    font-size: 1em;
  }

  .blogs .empty h1 {
    font-size: 50px;
  }

  .search-bar {
    margin: 5% 15%;
  }

  .blogs {
    grid-template-columns: 1fr;
  }

  .blog-navigation {
    width: 100%;
    justify-content: start;
    scroll-snap-type: x mandatory;
  }

  .blog-navigation button {
    width: 55%;
    flex-grow: 1;
    flex-shrink: 0;
    scroll-snap-align: center;
  }

  .blog-navigation button:first-of-type {
    margin-left: 50%;
  }

  .blog-navigation button:last-of-type {
    margin-right: 50%;
  }
  
  @keyframes tabresize {
    0%, 10% {
      width: var(--from-width);
    }
  
    90%, 100% {
      width: var(--to-width);
    }
  }
}