/*

###############################
### TEMPLATE: success story ###
###############################

### INFO:

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

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

@import "../molecules/copy";
@import "../molecules/quote";
@import "../molecules/text-media.scss";

@import "../organisms/text-media-block.scss";

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

body {
  background-color: color("whisper");
}

.#{template("success-story")} {
  overflow: hidden;
  perspective: 80rem;

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

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

    @media (max-width: 767px) {
      padding: 0 20px;
    }
  }

  .#{utility("content")} {
    @include content;

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

  .#{utility("stage")} {
    padding: 0 0 3em;

    @media (min-width: 768px) {
      padding-bottom: 10vw;
    }

    .stage-logo {
      width: 15%;
      height: auto;
    }

    .#{organism("stage-content")} {
      grid-column: 4 / 13;

      @media (max-width: 767px) {
        margin-top: 20em;
        margin-bottom: 4em;
      }

      @media (min-width: 768px) {
        margin: 7vw 1em 11vw 3em;
      }

      h1 {
        @include hl;
        @include hl-h1;
        margin-top: 0;
        color: color("white");
      }
    }
  }

  .#{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: grid;
      grid-template-columns: 1fr;
      grid-gap: 60px 30px;
      margin: 0 40px;

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

      .#{molecule("teaser")} {
        grid-column: 1;
        margin: 0;

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

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

  .#{organism("text-media-block")} {
    padding-bottom: 40px;

    h2 {
      margin-top: 1rem;
    }

    p {
      margin-top: 0;
    }

    .text {
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      z-index: 1;

      li {
        font-family: 'Noto Sans', system;;
        line-height: 1.6em;
        font-weight: normal;
        color: #48525c;
      }
    }

    .media {
      .#{molecule("ghost-frame-tablet")} {
        max-width: 80%;
      }

      .#{molecule("ghost-frame-mobile")} {
        max-width: 100%;
        margin-left: 15%;
      }
    }

    .#{molecule("lnk")} {
      margin-top: 30px;
    }

    @media (max-width: 767px) {
      .media {
        display: flex;
        justify-content: center;
        width: 100%;
        padding-bottom: 5.75rem;
      }
    }

    &-center {
      grid-column: 1;
      flex-direction: column;
      position: relative;
      width: 100%;

      @media (min-width: 768px) {
        grid-column-start: 9;
        grid-column-end: 25;
      }

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

      .#{utility("media")} {
        width: 100%;
      }
    }

    .#{utility("quote")} {
      padding: 8rem 0;

      @media (max-width: 767px) {
        padding: 5.5 0;
      }
    }

    @media (max-width: 767px) {
      &:nth-child(odd) {
        display: flex;

        .text {
          order: 2;
        }
        + .media {
          order: 1;
        }
      }
    }
  }
}
