/* @card-collection */
.card-collection {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;

  &__inner {
    display: flex;
    // align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;

    .icon-card {
      flex: 1;
      min-width: 256px;
    }

    // &.card-collection__inner--stackable {
    //   .icon-card {
    //     width: 100%;
    //     flex: unset;
    //   }
    // }

    &:not(.flickity-enabled) {
      margin: -$base-spacing/4;

      .icon-card {
        flex-basis: 320px;
        margin: $base-spacing/2;

        &__image {
          max-height: 200px;
        }

        &.MD .icon-card__image {
          max-height: none!important;
        }
      }
    }

    &.flickity-enabled {
      display: block;
      width: 100vw;
      @include poly-margin-minus-left;

      @media (max-width: $medium-screen) {
        position: unset;
      }

      .flickity-viewport {
        padding: 0 30px;
      }

      .icon-card {
        height: auto;
        transition: opacity 0.2s;
        width: 80%;
        margin-right: $base-spacing;

        &:not(.is-next):not(.is-selected):not(.is-previous) {
          box-shadow: none !important;
          opacity: 0;          
        }
        
        @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  
          display: block;
        }
      }

      @media (min-width: $medium-screen) {
        width: 100%;
        margin-left: 0!important;

        .icon-card {
          width: calc(50% - #{$base-spacing});
          height: auto;
        }
      }

      @media (min-width: $large-screen) {
        .icon-card {
          width: calc(33% - #{$base-spacing/2});
          height: auto;
        }
      }

      .flickity-button.next {
        @media (max-width: $medium-screen) {
         display: none;
        }
      }
    }
  }
}