@media (max-width: 768px) {
  main.teachings > * {
    width: 100%;
    box-sizing: border-box;
  }

  .search-container {
    display: flex;
    justify-content: flex-end;
    padding: 10px;
  }

  .in-teachings {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .in-teachings .out,
  .in-teachings .soon {
    width: 100%;
  }

  h2.all-posts {
    text-align: left;
    padding-left: 10px;
  }

  .sort-container {
    display: flex;
    justify-content: flex-end;
    padding: 10px;
  }

  .posts-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .posts-container .post-record {
    width: 100%;
  }

  .pagination {
    text-align: center;
    padding: 10px;
  }
}