/* Responsive overrides. Ported verbatim from the end of
   css/components.css in the static handoff. Loaded last in
   jcao.libraries.yml so these rules always win the cascade.
   Breakpoints correspond to jcao.breakpoints.yml (jcao.tablet /
   jcao.mobile). */
@media (max-width: 900px) {
  .jcao-layout { grid-template-columns: minmax(0, 1fr); }
  .jcao-aside { position: static; }
  .jcao-header__inner { flex-wrap: wrap; }
  .jcao-nav { width: 100%; justify-content: flex-start; }
  .jcao-search { margin-left: 0; flex: 1 1 100%; }
  .jcao-search input { max-width: none; }
}
@media (max-width: 620px) {
  .jcao-brand__name { font-size: 18px; }
  .jcao-brand__sub { font-size: 10.5px; }
  .jcao-footer__legal nav { margin-left: 0; }
}



.jcao-tasks__grid > .views-element-container,
.jcao-tasks__grid > .views-element-container > div {
  display: contents !important;
}

.jcao-news__grid > .views-element-container,
.jcao-news__grid > .views-element-container > div {
  display: contents !important;
}

.jcao-events__grid > .views-element-container,
.jcao-events__grid > .views-element-container > div {
  display: contents !important;
}
.jcao-grid-cards > .views-element-container,
.jcao-grid-cards > .views-element-container > div {
  display: contents !important;
}

.jca-container {
    max-width: var(--max);
    margin-inline: auto;
    padding-inline: var(--gutter);
    margin-top: 30px;
}

@media (min-width: 1280px) {
  .jca-container {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (max-width: 600px) {
  .jca-container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

.jc-container {
    max-width: var(--max);
    margin-inline: auto;
    padding-inline: var(--gutter);
    margin-top: 30px;
}

@media (min-width: 1280px) {
  .jc-container {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (max-width: 600px) {
  .jc-container {
    padding-left: 16px;
    padding-right: 16px;
  }
}