.cards-block {
  background-color: var(--color-grey-super-light);
  padding-top: var(--block-vertical-padding);
  padding-bottom: var(--block-bottom-padding);
}
.cards-block--theme-light {
  background-color: var(--color-white);
}
.cards-block--theme-light .box__content {
  background-color: var(--theme-color-lightest);
}
.cards-block--theme-light .shadow {
  --shadow-color: var(--theme-color-shadow);
}

.block-intro {
  margin-bottom: 30px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  max-width: 1080px;  
}
.block-intro__heading {
  color: var(--theme-color);
}
.block-intro__text p {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.block-intro__text > * + * {
  margin-top: 15px;
}

.card.theme .box__content {
  background-color: var(--theme-color);
}
.card.theme .box-heading,
.card.theme .box-text {
  color: var(--theme-color-contrast);
}

/* Apply a background image to the first cards block after the hero block, only on home page. */
.level-1 .cards-block:not(.cards-block ~ .cards-block) {
  background-color: #fff;
  background-image: url(/assets/img/bg-pattern.webp);
  background-repeat: no-repeat;
  background-position: top;
  background-size: 960px 241px;
}

@media (min-width: 540px) {
  .block-intro {
    padding: 20px 40px 10px 40px;
  }
}

@media (min-width: 860px) {
  .level-1 .cards-block:not(.cards-block ~ .cards-block) {
    background-size: 1919px 482px;
  }
  .block-intro__text p {
    font-size: 1.5rem;
    line-height: 2.25rem;
  }
}

@media (min-width: 860px) {
  .level-1 .cards-block:not(.cards-block ~ .cards-block) {
    background-size: contain;
  }
}