/*

######################################
### TEMPLATE: docs guides overview ###
######################################

### 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';

@import 'components/molecules/_teaser.scss';

.#{template('docs-guides-overview')} {
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: top right;
  background-attachment: fixed;

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

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

  .#{utility('content')} {
    @include content;
    @include content-white-bg;
  }

  .#{utility('content')} {
    p.limit {
      margin-bottom: 1.75em;
    }

    h1, h2 {
      margin-bottom: .5em;
    }

    .#{atom('sidebar-toggle-label')}{
      margin-left: -25px;

      @media (min-width: 768px) {
        margin-left: -30px;
      }
    }
  }

  section {

    &.#{utility('section')}, &.#{utility('video-slider')} {
      width: 100%;
    }

    &.#{utility('content')} {
      padding: 62px 15px;
      background-color: color('white');
      @include content-shadow;
      @media (min-width: 768px) {
        padding: 62px;
      }
    }
  }
  .#{utility('card-grid')} {
    @media (min-width: 930px) {
      padding: 40px 30px 90px;
    }
  }

  .#{organism('video-slider')} {
    &-carousel {
      amp-youtube {
        box-shadow: 0 15px 15px -10px rgba(0,0,0,0.3);
      }
    }
  }
}
