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

/* mobile first styles */
.contentWrapper {
  background: #f7f7f7;
  padding: 64px 16px 16px;
  border-radius: 64px;
  width: 100%;
  display: flex;
  gap: 32px;
  overflow: hidden;
}

.cardWrapper {
  height: 100%;
  min-width: 288px;
}

.contentWrapper > * {
  flex: 1 1 0;
  min-width: 0;
}

.cardCol {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.cardCol > :nth-child(1) {
  flex: 1;
}

.cardCol > :nth-child(2) {
  flex-shrink: 0;
}

.businessSegmentSwitcherDesktop {
  display: none;
}

/* Removal of margins at 320px breakpoint. This should be factored into the section component.  */
.businessSegmentSwitcher {
  margin: 0 -16px;
}

/* stylelint-disable-next-line media-feature-range-notation */
@media (min-width: 329px) {
  .businessSegmentSwitcher {
    margin: 0;
  }
}

@media (--arc-custom-media-min-width-s-px) {
  .contentWrapper {
    padding: 64px 24px 24px;
  }

  .cardWrapper {
    min-width: 282px;
  }
}

@media (--arc-custom-media-min-width-m-px) {
  .businessSegmentSwitcherDesktop {
    display: block;
  }

  /* Hide all cards not desktop carousel */
  .businessSegmentSwitcherDesktop .contentWrapper > *:not(.desktopCarousel),
  .businessSegmentSwitcherMobile {
    display: none;
  }

  .cardWrapper {
    min-width: 384px;
  }
}

@media (--arc-custom-media-min-width-l-px) {
  .desktopCarousel {
    display: none;
  }

  .businessSegmentSwitcherDesktop .contentWrapper > *:not(.desktopCarousel) {
    display: flex;
  }

  .contentWrapper {
    padding: 64px 32px 32px;
  }
}