/* Home Top10 category grids — desktop up to 4 columns when width allows. */

.portal-ygy-section-grid,
.japp-top10s,
.jtab-top10s,
.jopia-top10s,
.jwa-top10s {
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.portal-ygy-section-grid > .portal-ygy-top10-box,
.japp-top10s > .japp-top10,
.jtab-top10s > .jtab-top10,
.jopia-top10s > .jopia-top10,
.jwa-top10s > .jwa-top10 {
  width: auto;
  max-width: none;
  margin-right: 0;
  min-width: 0;
}

@media (min-width: 901px) {
  .portal-ygy-section-grid,
  .japp-top10s,
  .jtab-top10s,
  .jopia-top10s,
  .jwa-top10s {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .portal-ygy-section-grid,
  .japp-top10s,
  .jopia-top10s,
  .jwa-top10s {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jtab-top10s {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .jtab-top10s {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  .japp-top10s > .japp-top10,
  .jopia-top10s > .jopia-top10,
  .jwa-top10s > .jwa-top10 {
    grid-column: 1 / -1;
  }
}