.blog_section {
  padding: 12.2rem 0 16rem;
}

.blog_section .nav_list {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 4.25rem;
}

.blog_section .nav_list .nav_item {
  font-size: 1.8rem;
  font-weight: 700;
  color: #757575;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
  padding: 1.3rem 0;
}

.blog_section .nav_list .nav_item::after {
  width: 0;
  height: 2px;
  background-color: var(--theme_color);
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: all 0.3s;
  content: '';
}

.blog_section .nav_list .nav_item.active,
.blog_section .nav_list .nav_item:hover {
  color: #161616;
}

.blog_section .nav_list .nav_item.active::after,
.blog_section .nav_list .nav_item:hover::after {
  width: 100%;
  opacity: 1;
}

.blog_section .list {
  margin-top: 4rem;
}

.blog_section .list>ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem 2%;
}

.blog_section nav.navigation {
  margin-top: 8rem;
}

@media screen and (min-width: 768px) and (max-width: 896px) {
  .blog_section .list>ul {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 768px) {
  .blog_section {
    padding: 4rem 0;
  }

  .blog_section .flex {
    display: block;
  }

  .blog_section .nav_list {
    gap: 2rem;
    width: 100vw;
    flex-wrap: nowrap;
    padding: 0 20px;
    margin: 1.2rem -20px 0;
    overflow-x: auto;
  }

  .blog_section .nav_list::-webkit-scrollbar {
    display: none;
  }

  .blog_section .nav_list .nav_item {
    white-space: nowrap;
    font-size: 16px;
    padding: 12px 0;
  }

  .blog_section .list {
    margin-top: 2rem;
  }

  .blog_section .list>ul {
    grid-template-columns: 1fr;
    gap: 2rem 1rem;
  }

  .blog_section nav.navigation {
    margin-top: 3rem;
  }
}

@media screen and (min-width: 640px) and (max-width: 768px) {
  .blog_section .list>ul {
    grid-template-columns: 1fr 1fr;
  }
}