/* ==========================================================================
   _grids.css - canonical definitions relocated from styles.css / NewHomepage.css
   Consolidated in phase 2 (see scripts/consolidate-css.mjs). Loaded once in
   _document.tsx after base/layout files and before page-specific CSS.
   ========================================================================== */

[grid] {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  margin-top: 45px;
  margin-bottom: 45px;
}

@media (min-width: 950px) {
  [grid] {
    margin-top: 45px;
    margin-bottom: 45px;
  }
}

[grid]:last-child {
  margin-bottom: 0;
}

[grid-items] {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  width: 100%;
  max-width: 90vw;
}

[grid-large-cards] [grid-items] {
  max-width: 670px;
}

[grid-items] > div, [grid-items] > a {
  flex: 0 0 calc(50% - 7.5px);
  height: min-content;
  display: flex;
  justify-content: center;
  align-items: center;
}

[grid-items] > a:hover {
  box-shadow: 0 1px 2px 0 #48dbac;
}

[grid-items] > div:nth-child(2), [grid-items] > a:nth-child(2) {
  margin-top: 25%;
}

[grid-large-cards]:not([grid-5]) [grid-items] > div, [grid-large-cards]:not([grid-5]) [grid-items] > a {
  margin: 0;
}

[grid-items] > div:nth-child(3), [grid-items] > a:nth-child(3) {
  margin-top: -25%;
}

[grid-items] > div:nth-child(5), [grid-items] > a:nth-child(5) {
  margin-top: -25%;
  justify-self: start;
}

[grid-large-cards] [grid-items] > div, [grid-large-cards] [grid-items] > a {
  flex: 0 0 100%;
  max-width: 100%;
  aspect-ratio: unset;
}

@media (min-width: 768px) {
  [grid-large-cards] [grid-items] > div, [grid-large-cards] [grid-items] > a {
    aspect-ratio: 320/400;
  }
}

@media (min-width: 768px) {
  [grid-4] [grid-items] {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 820px;
    justify-content: center;
  }
}

@media (min-width: 768px) {
  [grid-4] [grid-items] > div, [grid-4] [grid-items] > a {
    flex: 0 0 calc(25% - 15px);
    margin-top: unset;
  }
}

@media (min-width: 768px) {
  [grid-5] [grid-items] {
    max-width: 660px;
    gap: 20px;
    justify-content: center;
  }
}

@media (min-width: 768px) {
  [grid-5] [grid-items] > div, [grid-5] [grid-items] > a {
    flex: 0 0 calc(33.33333333% - 13.3333333333px);
    margin-top: unset !important;
  }
}

@media (min-width: 768px) {
  [grid-5-reverse] [grid-items] > div:nth-child(1), [grid-5-reverse] [grid-items] > a:nth-child(1) {
    margin-left: 1%;
  }
}

@media (min-width: 768px) {
  [grid-5-reverse] [grid-items] > div:nth-child(2), [grid-5-reverse] [grid-items] > a:nth-child(2) {
    margin-right: 1%;
  }
}

@media (min-width: 1300px) {
  [grid-5] [grid-items] {
    max-width: 1030px;
    gap: 20px;
  }
}

@media (min-width: 1300px) {
  [grid-5] [grid-items] > div, [grid-5] [grid-items] > a {
    flex: 0 0 calc(20% - 16px);
    margin: unset !important;
  }
}

@media (min-width: 768px) {
  [grid-6] [grid-items] {
    max-width: 610px;
    gap: 20px;
    justify-content: center;
  }
}

@media (min-width: 768px) {
  [grid-6] [grid-items] > a {
    flex: 0 0 calc(33.33333333% - 13.3333333333px);
    margin-top: unset !important;
  }
}

@media (min-width: 1300px) {
  [grid-6] [grid-items] {
    max-width: 1240px;
    gap: 20px;
  }
}

@media (min-width: 1300px) {
  [grid-6] [grid-items] > a {
    flex: 0 0 calc(16.6666666667% - 16.6666666667px);
    margin: unset !important;
  }
}

@media (min-width: 768px) {
  [grid-7] [grid-items] {
    max-width: 820px;
    gap: 20px;
    justify-content: center;
  }
}

@media (min-width: 768px) {
  [grid-7] [grid-items] > div, [grid-7] [grid-items] > a {
    flex: 0 0 calc(25% - 15px);
    margin-top: unset !important;
  }
}

@media (min-width: 768px) {
  [grid-3][grid-large-cards] [grid-items] {
    max-width: 730px;
    gap: 30px;
  }
}

@media (min-width: 768px) {
  [grid-3][grid-large-cards] [grid-items] > div, [grid-3][grid-large-cards] [grid-items] > a {
    flex: 0 0 calc(50% - 15px);
  }
}

@media (min-width: 768px) {
  [grid-3][grid-large-cards] [grid-items] > div:nth-child(2), [grid-3][grid-large-cards] [grid-items] > a:nth-child(2) {
    margin-top: 25%;
  }
}

@media (min-width: 768px) {
  [grid-3][grid-large-cards] [grid-items] > div:nth-child(3), [grid-3][grid-large-cards] [grid-items] > a:nth-child(3) {
    margin-top: -25%;
  }
}

@media (min-width: 1300px) {
  [grid-3][grid-large-cards] [grid-items] {
    max-width: 1020px;
  }
}

@media (min-width: 1300px) {
  [grid-3][grid-large-cards] [grid-items] > div, [grid-3][grid-large-cards] [grid-items] > a {
    flex: 0 0 calc(33.33333333% - 20px);
    margin-top: unset !important;
  }
}

@media (min-width: 768px) {
  [grid-4][grid-large-cards] [grid-items] {
    max-width: 730px;
    gap: 30px;
  }
}

@media (min-width: 768px) {
  [grid-4][grid-large-cards] [grid-items] > div, [grid-4][grid-large-cards] [grid-items] > a {
    flex: 0 0 calc(50% - 15px);
  }
}

@media (min-width: 768px) {
  [grid-4][grid-large-cards] [grid-items] > div:nth-child(2), [grid-4][grid-large-cards] [grid-items] > a:nth-child(2) {
    margin-top: 25%;
  }
}

@media (min-width: 768px) {
  [grid-4][grid-large-cards] [grid-items] > div:nth-child(3), [grid-4][grid-large-cards] [grid-items] > a:nth-child(3) {
    margin-top: -25%;
  }
}

@media (min-width: 768px) {
  [grid-4][grid-large-cards] [grid-items] > div:nth-child(5), [grid-4][grid-large-cards] [grid-items] > a:nth-child(5) {
    margin-top: -25%;
  }
}

@media (min-width: 1300px) {
  [grid-4][grid-large-cards] [grid-items] {
    max-width: 1370px;
  }
}

@media (min-width: 1300px) {
  [grid-4][grid-large-cards] [grid-items] > div, [grid-4][grid-large-cards] [grid-items] > a {
    flex: 0 0 calc(25% - 22.5px);
    margin-top: unset !important;
  }
}

@media (min-width: 768px) {
  [grid-5][grid-large-cards] [grid-items] {
    max-width: 730px;
    justify-content: start;
    gap: 30px;
  }
}

@media (min-width: 768px) {
  [grid-5][grid-large-cards] [grid-items] > div, [grid-5][grid-large-cards] [grid-items] > a {
    flex: 0 0 calc(50% - 15px);
  }
}

@media (min-width: 768px) {
  [grid-5][grid-large-cards] [grid-items] > div:nth-child(2), [grid-5][grid-large-cards] [grid-items] > a:nth-child(2) {
    margin-top: 25% !important;
  }
}

@media (min-width: 768px) {
  [grid-5][grid-large-cards] [grid-items] > div:nth-child(3), [grid-5][grid-large-cards] [grid-items] > a:nth-child(3), [grid-5][grid-large-cards] [grid-items] > div:nth-child(5), [grid-5][grid-large-cards] [grid-items] > a:nth-child(5) {
    margin-top: -25% !important;
  }
}

@media (min-width: 1300px) {
  [grid-5][grid-large-cards] [grid-items] {
    max-width: 1110px;
    justify-content: center;
  }
}

@media (min-width: 1300px) {
  [grid-5][grid-large-cards] [grid-items] > div, [grid-5][grid-large-cards] [grid-items] > a {
    flex: 0 0 calc(33.33333333% - 20px);
  }
}

@media (min-width: 1300px) {
  [grid-5][grid-large-cards] [grid-items] > div:nth-child(2), [grid-5][grid-large-cards] [grid-items] > a:nth-child(2) {
    margin-top: 0% !important;
  }
}

@media (min-width: 1300px) {
  [grid-5][grid-large-cards] [grid-items] > div:nth-child(3), [grid-5][grid-large-cards] [grid-items] > a:nth-child(3), [grid-5][grid-large-cards] [grid-items] > div:nth-child(5), [grid-5][grid-large-cards] [grid-items] > a:nth-child(5) {
    margin-top: 0% !important;
  }
}

.cg-TeamGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  max-width: 400px;
  margin: 0 auto 35px;
}

@media (min-width: 768px) {
  .cg-TeamGrid {
    max-width: 820px;
  }
}

[grid-2x2] [grid-items] {
  display: grid;
  grid-template-columns: auto;
  gap: 20px;
  max-width: 580px;
}

@media (min-width: 768px) {
  [grid-2x2] [grid-items] {
    grid-template-columns: auto auto;
  }
}

[grid-2x2] .ic-IconCard {
  max-width: unset !important;
  margin-top: 0 !important;
  width: 100%;
}

@media (min-width: 768px) {
    [grid-2x2] .ic-IconCard {
      max-width: 280px !important;
    }
}

[grid-2x2] .ic-Card {
  padding: 20px;
  justify-content: start;
  gap: 20px;
  aspect-ratio: unset;
}

@media (min-width: 768px) {
    [grid-2x2] .ic-Card {
      aspect-ratio: 280/240;
    }
}

[grid-2x2] .ic-Card span {
  flex: 0 0 auto;
}

.cg-TeamGrid .ic-IconCard {
  flex: 0 1 calc(50% - 10px);
}

@media (min-width: 768px) {
    .cg-TeamGrid .ic-IconCard {
      flex: 0 1 calc(25% - 15px);
    }
}

.cg-TeamGrid .ic-Card {
  aspect-ratio: unset;
}

.cg-TeamGrid .ic-Card span {
  font-family: AvenirNext-DemiBold;
  font-size: clamp(1rem, 0.873rem + 0.6349vw, 1.25rem);
  line-height: 1.2;
  color: #282828;
}

@media (min-width: 768px) {
  .ApplicationJourneyCards [grid-items] {
    max-width: 850px;
    gap: 15px;
  }
}

[data-dev-mode] section, [data-dev-mode] .ns-Content, [data-dev-mode] [grid], [data-dev-mode] .section, [data-dev-mode] .gsm-GenericScrollingMenu, [data-dev-mode] .hn-HeaderSubNavList {
  background-color: rgba(105, 90, 205, 0.1);
}

@media (min-width: 420px) {
    [grid-items] {
      width: calc(100% - 25vw);
      margin-left: 40px;
      margin-right: 40px;
    }
}

@media (min-width: 600px) {
    [grid-items] {
      width: calc(100% - 47vw);
      margin-left: 40px;
      margin-right: 40px;
    }
}

@media (min-width: 768px) {
    [grid-items] {
      width: auto;
      margin-left: 40px;
      margin-right: 40px;
    }
}

[grid-6] [grid-items] {
  justify-content: center;
}

[grid-3] [grid-items] {
  justify-content: flex-start;
}

@media (min-width: 768px) {
    [grid-3] [grid-items] > a {
      flex: 0 0 calc(33.33333333% - 13.3333333333px);
      margin-top: unset !important;
    }
}

[grid-2] [grid-items] > div:nth-child(2),
[grid-2] [grid-items] > a:nth-child(2) {
  margin-top: 0%;
}