/*

#############################
### ORGANISM: teaser grid ###
#############################

### INFO:

*/
@import '../../extends';
@import '../../functions';
@import '../../mixins';
@import '../../variables';

@import 'components/atoms/_headline';

.#{utility('teaser-grid')} {
  max-width: 100%;
  @media (min-width: 768px){
    grid-column: 1 / -1;
  }

  @media (min-width: 1024px){
    grid-column: 4 / 22;
  }
}

.#{organism('teaser-grid')} {
  width: 100%;
  margin-bottom: 30px;

  & > h1,
  & > h2,
  & > h3,
  & > h4,
  & > h5,
  & > h6 {
    grid-column: 1 / 14;
  }

  .#{molecule('lnk')} {
    grid-column: 16 / 22;
  }

  &-list {
    grid-column: 1 / -1;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    width: auto;
    display: flex;
    flex-wrap: nowrap;
    padding: 20px 0;
    margin: 0 -15px;

    @media (min-width: 575px) {
      overflow: visible;
      width: 100%;
      display: grid;
      grid-gap: 30px;
      grid-template-columns: 1fr;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: auto;
      padding: 0;
      margin: 0;
    }

    @media (min-width: 768px) {
      grid-template-columns: repeat(2, 1fr);
    }

    @media (min-width: 1024px) {
      grid-template-columns: repeat(3, 1fr);
    }

    &-count-4,
    &-count-8,
    &-count-16 {
      @media (min-width: 768px) {
        grid-template-columns: repeat(4, 1fr);
      }

      .#{molecule('teaser')} {
        &-headline {
          @include hl-h6;
        }
      }
    }
  }
}
