.story {
  &__pictures {
    background-color: $color-primary;
    grid-column: full-start / col-end 4;
    background-image: linear-gradient(
        rgba($color-primary, 0.5),
        rgba($color-primary, 0.5)
      ),
      url(../commons/img/back.jpg);
    background-size: cover;

    display: grid;
    grid-template-rows: repeat(6, 1fr);
    grid-template-columns: repeat(6, 1fr);
    align-items: center;

    @include media("<medium") {
      grid-column: 1 / -1;
      padding: 6rem;
    }
  }

  &__img--1 {
    width: 100%;
    grid-row: 2 / 6;
    grid-column: 2 / 6;
    box-shadow: 0 2rem 5rem rgba(#000, 0.1);

    @include media("<medium") {
      grid-column: 1 / 5;
      grid-row: 1 / -1;
      height: 100%;
    }
  }

  &__img--2 {
    width: 115%;
    z-index: 1;
    grid-row: 4 / 6;
    grid-column: 4 / 7;
    box-shadow: 0 2rem 5rem rgba(#000, 0.2);

    @include media("<medium") {
      grid-row: 1 / -1;
      width: 100%;
    }
  }

  &__content {
    background-color: $color-grey-light-1;
    grid-column: col-start 5 / full-end;

    padding: 6rem 8vw;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    @include media("<medium") {
      grid-column: 1 / -1;
      grid-row: 5 / 6;
    }
  }

  &__text {
    font-size: 1.5rem;
    font-style: italic;
    margin-bottom: 4rem;
  }
}