// vf-card-container

// **Thinking about deleting this file?**
// If your component needs no CSS/Sass, we still recommend leaving the
// scss files in place. As this is primarily a CSS framework, it is better to
// leave the empty files so you know a file wasn't accidently omitted.
// If you don't have any Sass, you can trim this block down to:
// "This page was intentionally left blank"

@import 'package.variables.scss';
// Debug information from component's `package.json`:
// ---
/*!
 * Component: #{map-get($componentInfo, 'name')}
 * Version: #{map-get($componentInfo, 'version')}
 * Location: #{map-get($componentInfo, 'location')}
 */

@import 'vf-card-container.variables.scss';

// An element immediately before or after vf-card-container should receive more spacing
.vf-stack .vf-card-container + *,
.vf-stack * + .vf-card-container {
  --vf-stack-margin--custom: var(--page-grid-gap);
}

// no spacing between fullbleed card containers and fullbleed items
.vf-stack .vf-card-container.vf-u-fullbleed + .vf-u-fullbleed,
.vf-stack .vf-card-container.vf-u-fullbleed + .vf-hero,
.vf-stack .vf-card-container.vf-u-fullbleed + .vf-footer {
  --vf-stack-margin--custom: 0;
}

.vf-card-container {
  grid-column: 1 / -1;
  padding: 2rem 0; // IE11 fallback
  padding: var(--page-grid-gap) 0;
}

.vf-card-container__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: $vf-layout--comfortable;

  @supports (display: grid) {
    --vf-card-container__grid--size: 18rem;
    display: grid;
    gap: calc(var(--page-grid-gap) / 2) var(--page-grid-gap);
    grid-template-columns: repeat(auto-fit, minmax(var(--vf-card-container__grid--size--overide, var(--vf-card-container__grid--size)), 1fr));
    margin: 0 auto;
    max-width: $vf-layout--comfortable;

    @media (min-width: $vf-breakpoint--sm) {
      --vf-card-container__grid--size: 20rem;
    }
  }

  .vf-section-header {
    margin-bottom: 16px;
    width: 100%;

    @supports (display: grid) {
      grid-column: 1 / -1;
      margin-bottom: unset;
    }
  }
  .vf-card {
    margin-bottom: 40px;
    width: 30%;
    @supports (display: grid) {
      margin-bottom: unset;
      width: unset;
    }
  }
}

.vf-card-container__col-4 .vf-card-container__inner {
  @supports (display: grid) {
    --vf-card-container__grid--size: 18rem;
    // @media (min-width: $vf-breakpoint--sm) {
    // --vf-card-container__grid--size: 20rem;
    // }
  }

  .vf-card {
    width: 24%;
    @supports (display: grid) {
      margin-bottom: unset;
      width: unset;
    }
  }
}