/* Portal layout: desktop keeps categories beside the content column. */
.portal-grid {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  column-gap: 24px;
  align-items: start;
}

.portal-grid > .category-panel {
  min-width: 0;
  margin: 0;
  border-right: 1px solid var(--line);
  border-bottom: 0;
  padding: 28px 20px 30px 0;
}

.portal-grid > .main-column {
  min-width: 0;
}

.portal-grid > .main-column > .hero {
  margin-right: 0;
  margin-left: 0;
}

.portal-grid > .main-column > .quick-links {
  margin-right: 0;
  margin-left: 0;
}

.portal-grid > .main-column > .tool-panel {
  padding-left: 0;
}

/* The original stylesheet has an 800px mobile rule; this later rule keeps
   small laptop/tablet browser windows in the intended two-column layout. */
@media (min-width: 601px) {
  .portal-grid > .category-panel {
    min-height: 530px;
  }

  .portal-grid > .category-panel nav {
    display: block;
    overflow: visible;
  }

  .portal-grid > .category-panel .category {
    width: 100%;
    flex: initial;
    padding: 0 14px 0 16px;
  }

  .portal-grid > .category-panel .category i {
    display: block;
  }

  .portal-grid > .category-panel .category-divider,
  .portal-grid > .category-panel .category-note {
    display: block;
  }

  .category-toggle {
    display: inline-block;
  }
}

@media (max-width: 600px) {
  .portal-grid {
    display: block;
    column-gap: 0;
  }

  .portal-grid > .category-panel {
    min-height: 0;
    position: static;
    padding: 18px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .portal-grid > .main-column > .hero {
    margin-right: -16px;
    margin-left: -16px;
  }

  .portal-grid > .main-column > .quick-links {
    margin-right: -16px;
    margin-left: -16px;
  }

  .portal-grid > .main-column > .tool-panel {
    padding-left: 16px;
  }
}