@import url("@arc-ui/tokens-arc/dist/custom-media.css");

.highlights {
  display: grid;
  gap: 48px 24px;
  grid-template-columns: 1fr;
}

.highlightItem {
  max-width: 480px;
  width: auto;
}

@media (--arc-custom-media-min-width-s-px) {
  .highlights {
    grid-template-columns: 1fr 1fr;
  }

  .highlightItem {
    min-width: 282px;
    padding-right: 0;
  }
}

@media (--arc-custom-media-min-width-m-px) {
  .highlights2Column {
    grid-template-columns: 1fr 1fr;
  }

  .highlights2Column .highlightItem {
    max-width: max-content;
    min-width: 348px;
    padding-right: 62px;
  }

  .highlights3Column {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .highlights3Column .highlightItem {
    min-width: 224px;
  }
}

@media (--arc-custom-media-min-width-l-px) {
  .highlights2Column {
    grid-template-columns: 1fr 1fr;
  }

  .highlights2Column .highlightItem {
    min-width: 468px;
    padding-right: 82px;
  }

  .highlights3Column {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .highlights3Column .highlightItem {
    min-width: 304px;
  }
}

@media (--arc-custom-media-min-width-xl-px) {
  .highlights {
    gap: 48px 32px;
  }

  .highlights2Column {
    grid-template-columns: 1fr 1fr;
  }

  .highlights2Column .highlightItem {
    min-width: 592px;
    padding-right: 104px;
  }

  .highlights3Column {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .highlights3Column .highlightItem {
    min-width: 384px;
  }
}