.vision {
  position: relative;

  width: 100%;

  padding: 8rem 12rem;

  background: url("/assets/img/mission-and-vision.jpg?as=webp") no-repeat center right/cover; // Noise 40 25

  @include respond(phablet) {
    padding: 6rem 3rem;
  }

  &::before {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    content: "";
    background-image: linear-gradient(to top, $color-black 60%, transparent);
    opacity: 0.65;
  }

  &__content {
    @include flex(8rem, center, center, column);

    position: relative;

    @include respond(tab-land) {
      gap: 5rem;
    }
  }

  &__quote {
    align-self: flex-end;

    width: 40%;

    padding-right: 10%;

    color: $color-white !important;

    @include respond(tab-port) {
      width: 60%;
    }

    @include respond(phablet) {
      width: 100%;
    }
  }

  &__quote-img {
    position: absolute;
    top: 0;
    left: 0;

    width: 20rem;

    opacity: 0.1;
    filter: invert(1);
  }

  &__heading {
    font-size: 10rem;
    font-family: $font-family-handwritten;
    color: $color-primary-regular;
    text-shadow: $text-shadow-color;
  }

  &__description {
    @include flex(2rem, initial, center, column);

    padding: 0 10%;
  }

  &__text {
    line-height: 120%;
    letter-spacing: 1px;
    font-size: $font-size-larger;
    font-family: $font-family-headings;
    text-align: center;
    text-shadow: $text-shadow-grey;
    hyphens: auto;
  }
}
