main .section:has(.card) {
  background-color: #F1F3F4;
  padding-top: 80px;
}

.section:not(.xxxl-spacing-static, .xxl-spacing-static, .xl-spacing-static, .xxxl-spacing, .xxl-spacing, .xl-spacing,
.l-spacing, .m-spacing, .s-spacing, .xs-spacing, .xxs-spacing):has(.card):not([data-padding='none']) > .content:first-child {
  padding-top: 0;
}

main .section:has(.cards.highlight) {
  padding-left: 15px;
  padding-right: 15px;
}

.section:not(.xxxl-spacing-static, .xxl-spacing-static, .xl-spacing-static, .xxxl-spacing, .xxl-spacing, .xl-spacing,
.l-spacing, .m-spacing, .s-spacing, .xs-spacing, .xxs-spacing):has(.cards.highlight) {
  padding-top: 60px;
  padding-bottom: 120px;
}

main .section:has(.card) > div > h2:first-of-type {
  margin-top: 80px;
}

main .section:has(.card) .content {
  margin: auto;
  max-width: 375px;
  padding: 0;
}

main .section:has(.cards.highlight) {
  background: var(--gradient-highlight-vertical);
}

main .section .cards {
  padding: 0;
  display: flex;
  flex-direction: column;
  margin: 56px auto;
  max-width: 375px;
}

main .section .cards .card {
  background-color: #FFF;
  width: 100%;
  margin: 0 auto 16px auto;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
}

main .section .cards .card .card-image {
  box-sizing: border-box;
  border-radius: 20px 20px 0 0;
  min-height: 136px;
}

main .section .cards .card .card-image img {
  border-radius: 20px 20px 0 0;
}


main .section .cards .card .card-content {
  padding: 32px 32px 8px 32px;
  color: #232323;
}

main .section .cards .card .card-content h2 {
  text-align: center;
  margin-bottom: 32px;
}

main .section .cards .card .card-content p {
  margin-top: 0;
  text-align: center;
}

main .section .cards .card .card-content ul {
  text-align: left;
}

main .section .cards.dark .card {
  background-color: #000;
}

main .section .cards a.card {
  text-decoration: none;
}

main .section .cards.dark .card .card-content {
  color: #FFF;
}

main .section .cards.dark .card .card-image {
  background-color: #343434;
}

main .section .cards.large {
  gap: 32px;
}

main .section .cards.large .card {
  margin: 0 auto;
}

main .section .cards.large .card .card-content {
  padding: 32px 32px 8px 32px;
}

main .section .cards.large .card .card-content h2 {
  text-align: left;
  font-size: 1.375rem;
  line-height: 1.1;
  margin-bottom: 32px;
}

main .section .cards.large .card .card-content p,
main .section .cards.large .card .card-content li {
 text-align: left;
  font-size: 1.125rem;
}

@media (min-width: 600px) {
  main .section .cards .card {
    width: 344px;
  }
}

@media (min-width:900px) {
  main .section:has(.card) .content {
    max-width: 830px;
  }

  main .section .cards {
    max-width: 1024px;
    width: unset;
    margin: 80px auto;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  main .section .cards .card {
    width: 248px;
    margin-right: 32px;
    background-color: #FFF;
    box-shadow: 0 4px 8px 2px rgba(102, 102, 102, 0.1);
    margin: 0 20px 32px 20px;
  }

  main .section .cards .card .card-image {
    background-color: #F1F3F4;
  }

  main .section .cards .card .card-content {
    padding: 16px 16px 8px 16px;
  }

  main .section .cards .card .card-content h2 {
    text-align: center;
    font-size: 1.25rem;
    line-height: 1.2;
    margin-bottom: 8px;
  }

  main .section .cards .card .card-content p,
  main .section .cards .card .card-content li {
    font-size: 0.9rem;
  }

  main .section .cards.large {
    flex-wrap: wrap;
    gap: 40px;
    width: 724px;
  }

  main .section .cards.large .card {
    width: 342px;
  }

  main .section .cards.featured .card:first-of-type {
    width: 724px;
    flex-direction: row;
  }

  main .section .cards.featured .card:first-of-type .card-image {
    border-top-left-radius: 20px;
    border-top-right-radius: 0;
    border-bottom-left-radius: 20px;
    min-height: unset;
    min-width: 342px;
  }

  main .section .cards.featured .card:first-of-type .card-content {
    padding: 32px 40px 8px 40px;
    min-height: 294px;
  }
}

@media (min-width:1200px) {
  main .section:has(.card) .content {
    max-width: 1024px;
  }
}