/*

######################
### TEMPLATE: home ###
######################

### INFO:

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

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

@import '../molecules/quote';
@import '../molecules/benefit';

@import '../organisms/benefits-overview.scss';
@import '../organisms/format-explainer.scss';

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

.#{template('home')} {
}

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


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

  .#{utility('stage')} {
    .#{organism('stage')} {
      &-content {
        margin-bottom: 42vw;

        @media (min-width: 768px) {
          grid-column: 3 / 23;
          margin-bottom: 23vw;
          text-align: center;
        }

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

        @media (min-width: 1280px) {
          grid-column: 5 / 21;
        }

        @media (min-width: 1920px) {
          margin-bottom: 28em;
        }

        &-headline {
          @include hl-stage;
        }
      }

      .#{utility('container')} {
        padding-left: 0;
      }
    }
  }

  .#{utility('teaser-grid')} {
    flex-direction: column-reverse;
    margin-bottom: 7em;

    .#{organism('teaser-grid')} {
      grid-column: 1 / 15;
      display: block;
      width: 100%;
      margin-bottom: 0;

      @media (min-width: 768px) {
        margin-top: -6em;
      }

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

      @media (min-width: 1280px) {
        grid-column: 1 / 13;
      }

      &-list {
        @media (min-width: 575px) {
          grid-template-columns: repeat(2, 1fr);
          grid-template-rows: repeat(5, 1fr);
        }
      }
    }

    .#{molecule('teaser')} {
      grid-column: 1;
      margin-bottom: 1em;

      &:nth-child(2n) { grid-column: 2; }
      &:nth-child(1) { grid-row: 2 / 4; }
      &:nth-child(2) { grid-row: 1 / 3; }
      &:nth-child(3) { grid-row: 4 / 6; }
      &:nth-child(4) { grid-row: 3 / 5; }
    }

    .#{molecule('copy')} {
      grid-column: 16 / 25;

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

      @media (min-width: 1280px) {
        grid-column: 14 / 23;
      }

      h2 {
        margin-top: 0;
      }

      p {
        margin-bottom: 2em;

        @media (min-width: 768px) {
          margin-bottom: 6em;
        }
      }
    }
  }

  .#{utility('newsletter')}-double {
    display: none;

    .amp-geo-group-doubleOptIn &, .amp-geo-pending & {
      display: flex;
    }
  }

  .#{utility('newsletter')} {
    display: flex;

    .amp-geo-group-doubleOptIn &, .amp-geo-pending & {
      display: none;
    }
  }

  .#{utility('shift-cards')} {
    background: color('whisper');

    &-grid {
      grid-template-rows: 100px auto 100px;
    }

    &-headline {
      grid-column: 1 / -1;
      width: 100%;
      @include hl;
      @include hl-h1;
      text-align: center;
      margin-top: 0;
    }
  }

  .#{utility('get-started')} {
    padding: 2.5em 30px 3em;

    @media (min-width: 768px) {
      padding: 6em 0 7em;
    }

    h2 {
      @include hl-h1;
      margin-top: 0;
    }

    .#{molecule('copy')} {
      width: 100%;
      margin-bottom: 0;
    }
  }
