/* ===============================
   FRONT PAGE LAYOUT ONLY
   (NO GLOBAL DUPLICATES)
================================ */
.page-title {
  display: none;
  font-size: larger;
}

.entire-page {
  display: flex;
  gap: 2%;
  margin: 1rem auto;
}

.col1 {
  width: 24%;
}

.col2 {
  width: 48%;
}

.col3 {
  width: 24%;
}

.entire {
  display: flex;
  gap: 2%;
}

/* ===============================
   DESKTOP: SCROLLABLE COLUMNS
================================ */
@media (min-width: 1025px) {

  .entire-page {
    display: flex;
    align-items: flex-start;
  }

  .entire-page .col1,
  .entire-page .col2,
  .entire-page .col3 {
    max-height: 80vh;
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* Hide scrollbar only */
  .entire-page .col1::-webkit-scrollbar,
  .entire-page .col2::-webkit-scrollbar,
  .entire-page .col3::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .entire-page .col1,
  .entire-page .col2,
  .entire-page .col3 {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
}

/* ===============================
   MOBILE COLUMN ORDER (FRONT PAGE)
================================ */
@media (max-width: 480px) {
  .col2 {
    order: 1;
  }

  .col1 {
    order: 2;
  }

  .col3 {
    order: 3;
  }

  .entire-page {
    flex-direction: column;
    margin: 0.5rem auto;
  }

  .col {
    width: 100% !important;
  }

  .entire {
    flex-direction: column;
  }
}