@media all and (max-width: 768px){
  .table-top{
    align-items: center;
    position: relative;
  }
  .table-top__toggle{
    display: none;
    padding: 1rem;
    background-color: var(--white-100);
    border: 3px solid var(--yellow-400);
    border-radius: var(--border-radius-16);
    box-shadow: var(--box-shadow-medium);
    position: absolute;
    top: 100%;
    z-index: 500;
  }
  .table-top__toggle.is-open{
    display: block;
  }
  .table-top__toggle input{
    width: 100%;
  }
  .table-top__toggle .page-button{
    display: block;
  }
  .table-top > .page-button .btn:has(span){
    display: none;
  }
  .table-top > .page-button .btn:has(i){
    display: block;
  }
  .column-table--yellow{
    display: none;
  }
  .table--mobile{
    display: block;
    padding-top: 4px;
    border-top: 2px solid var(--green-500);
  }
  .post--mobile{
    padding: 0.75rem;
    border-bottom: 1px solid var(--black-100);
  }
  .post--mobile > div{
    display: flex;
    align-items: center;
  }
  .post--mobile > div:first-child{
    gap: 0.75rem;
    margin-bottom: 1rem;
  }
  .post__num{
    width: 1.5rem;
    text-align: center;
  }
  .fa-bullhorn{
    font-size: 1rem;
  }
  .post__title{
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .fixed-post .post__title{
    color: var(--red-400);
  }
  .post--mobile > div:last-child{
    color: var(--black-200);
  }
  .post__writer{
    padding-right: 0.75rem;
  }
  .post__date{
    padding-left: 0.75rem;
    border-left: 1px solid var(--black-200);
  }
}