/*

##########################
### TEMPLATE: template ###
##########################

### INFO:

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

@import '../atoms/_text.scss';
@import '../atoms/_color.scss';
@import '../atoms/_headline.scss';

@import '../templates/_default.scss';

.#{template('template')} {

  .#{utility('container')} {
    @include container;
  }

  .#{utility('container-fluid')} {
    @include container-fluid;
  }

  .#{utility('content')} {
    grid-column: 1;
    position: relative;
    max-width: 100%;

    @media (min-width: 768px){
      grid-column: 3 / -3;
    }

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

  .#{utility('stage')} {
    @media (min-width: 768px ){
      padding-bottom: 10vw;
    }

    @media (min-width: 1024px ){
      padding-bottom: 5vw;
    }
  }

  .#{organism('stage')} {
    @media (max-width: 767px) {
      margin-bottom: 50px;
    }
    
    &-content {
      grid-column: 3 / 13;
      
      @media (max-width: 767px) {
        margin-top: 18em;
        margin-bottom: 4em;
      }
      
      @media (min-width: 1024px ){
        grid-column: 3 / 12;
      }

      &-headline {
        @include hl-h2;
        margin-top: 0;

        &-big {
          @include hl-xlrg;
          color: color('white');
          margin: 0;
        }
      }
    }
  }

  .#{organism('teaser-grid')} {
    grid-column: 4 / 22;
    width: 100%;
    margin-bottom: 7em;

    @media (min-width: 768px) {
      margin-bottom: calc(12.5em + 7em);
    }

    @media (min-width: 1024px) {
      margin-bottom: calc(12.5em + 8vw);
    }

    &-list {
      display: block;
      grid-template-columns: 1fr;
      grid-gap: 30px;
      margin: 0 40px;

      @media (min-width: 768px) {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-auto-flow: dense;
        margin: 0;
      }

      .#{molecule('teaser')}{
        grid-column: 1;
        grid-row: auto;
        margin: 0;
        max-width: 100%;

        @media (min-width: 768px) {
          grid-column: span 6;
          grid-row: span 6;
        }

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

        &-square {
          @media (min-width: 768px) {
            grid-row: span 5;
          }
        }
      }
    }
  }

  .#{organism('filter-bubbles-list')}{
    padding: 30px 0 60px 0;
  }
}
