@media (max-width: 1920px) {
  .container {
    width: 100%;
    margin: 0 auto;
  }
  .greet-box {
    font-size: 30px;
  }
  .timer-box {
    font-size: 60px;
  }
  .category-box {
    font-size: 20px;
  }
}
@media (max-width: 1199px) {
  .container {
    width: 100%;
  }
  .greet-box {
    font-size: 25px;
  }
  .timer-box {
    font-size: 50px;
  }
  .category-box {
    font-size: 15px;
  }
  .header {
    display: grid;
    grid-template-columns: 1fr;
  }
  .category-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .filter-text-box {
    display: flex;
    flex-direction: column;
  }
  .todo-search {
    text-align: center;
    width: 100%;
  }
  .period {
    text-align: center;
    width: 100%;
  }
  .importance {
    text-align: center;
    width: 100%;
  }
  .sorting-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  .add-btn {
    width: 100%;
  }
  .boards {
    display: grid;
    grid-template-columns: 1fr;
  }
  .achievement {
    grid-column: 1/3;
  }
}
@media (min-width: 320px) and (max-width: 767px) {
  .container {
    display: flex;
    flex-direction: column;
    padding: 30px 15px;
    max-width: 767px;
  }
  .timer-box {
    width: 100%;
    display: flex;
    gap: 5px;
  }

  .timer-box .time-box {
    width: 100%;
    height: auto;
    aspect-ratio: 1/ 1;
    font-size: 40px;
  }

  .category-box,
  .filter-box,
  .main-wrap,
  .boards {
    width: 100%;
    display: block;
  }

  .category,
  .todo-search,
  .period,
  .importance,
  .sorting-btn,
  .add-btn {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 5px 0;
  }

  .boards {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .todo-board,
  .in-progress-board,
  .done-board {
    width: 100%;
    min-height: auto;
  }

  .greet-box {
    font-size: 20px;
  }
  .timer-box {
    font-size: 40px;
  }
  .category-box {
    font-size: 15px;
  }
  .header {
    display: grid;
    grid-template-columns: 1fr;
  }
  .category-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .filter-text-box {
    display: flex;
    flex-direction: column;
  }
  .todo-search {
    width: 100%;
  }
  .period {
    width: 100%;
  }
  .importance {
    width: 100%;
  }
  .sorting-btn {
    min-width: none;
    width: 100%;
  }
  .add-btn {
    min-width: none;
    width: 100%;
  }
  .boards {
    display: grid;
    grid-template-columns: 1fr;
  }
}