.our-vision {
  position: relative;
  /* top:90vh */
  /* margin: -200px; */
  /* min-height: 100vh; */
  /* aspect-ratio: 16/9; */
  display: grid;
  /* background: linear-gradient(
    45.3deg,
    var(--impossible-yellow) 14.98%,
    var(--inevitable-red) 82.96%
  ); */
  background-size: cover;
}

.our-vision-container {
  place-self: center center;
  /* padding: 0px 2.2rem; */
  padding: 0px 1rem;
  /* margin-top: 150px; */
  max-width: 858px;
  margin: auto;
  z-index: 1;
}

.corner-detail {
  position: absolute;
  width: 80px;
  height: 80px;
  top: -79px;
  right: -1px;
}

.our-vision-title {
  font-size: 1.125rem;
  font-weight: var(--medium);
  color: var(--white);
  padding-bottom: 0.8rem;
}
.our-vision-sub-head {
  font-size: 2.25rem;
  color: var(--white);
  line-height: 1.13;
  font-weight: var(--bold);
  padding-bottom: 2.2rem;
}

.our-vision-body-copy h3 {
  font-size: 2.25rem;
  color: var(--white);
  line-height: 1.13;
  font-weight: var(--bold);
  padding-bottom: 2.2rem;
}

.our-vision-body-copy {
  font-size: 1rem;
  font-weight: var(--book);
  line-height: 1.6;
  color: var(--white);
  /* padding-bottom: 2rem; */
}

.our-vision-body-copy h1 {
  font-size: 32px;
  padding-bottom: 32px;
}

.our-vision-body-copy p {
  font-size: 1rem;
  font-weight: var(--book);
  line-height: 1.6;
  /* color: var(--white); */
  color: inherit;
  padding-bottom: 2rem;
}

.our-vision-body-copy img {
  max-width: 100%;
}

.vision-grid-mobile-top {
  grid-column: 1;
  grid-row: 1;
  place-self: start end;
  margin-top: 5rem;
}

.vision-grid-mobile-bottom {
  grid-column: 1;
  grid-row: 1;
  place-self: end start;
}

.vision-grid {
  display: none;
}

.our-vision-grid-top-left {
  grid-column: 1;
  grid-row: 1;
  place-self: start center;
  margin-top: 6rem;
  display: none;
}

.our-vision-grid-bot-left {
  grid-column: 1;
  grid-row: 1;
  place-self: end center;
  margin-bottom: 6rem;
  display: none;
}

.our-vision-grid-top-right {
  grid-column: 3;
  grid-row: 1;
  place-self: start start;
  margin-top: 3rem;
  display: none;
}

.our-vision-grid-bot-right {
  grid-column: 3;
  grid-row: 1;
  place-self: center center;
  margin-top: 6rem;
  display: none;
}

@media screen and (min-width: 980px) {
  .our-vision {
    grid-template-columns: 1fr;
  }

  .our-vision-grid-top-left {
    display: block;
  }
  #home-mission-top-left > #squares > * {
    opacity: 0;
  }
  #home-mission-top-right > #squares > * {
    opacity: 0;
  }
  .our-vision-grid-bot-left {
    display: block;
  }
  .our-vision-grid-top-right {
    display: block;
  }
  .our-vision-grid-bot-right {
    display: block;
  }
  #home-mission-bot-right > #squares > * {
    opacity: 0;
  }
}

@media screen and (min-width: 1360px) {
  .our-vision-container {
    place-self: center center;
    margin-top: 150px;
    max-width: 858px;
    padding-bottom: 150px;
    padding-left: 0px;
    padding-right: 0px;
  }

  .our-vision-title {
    font-size: 1.625rem;
    padding-bottom: 1.5rem;
  }
  .our-vision-sub-head {
    font-size: 3rem;
    line-height: 1.2;
    padding-bottom: 3.125rem;
  }

  .our-vision-body-copy h3 {
    font-size: 3rem;
    line-height: 1.2;
    padding-bottom: 3.125rem;
  }

  .our-vision-body-copy {
    font-size: 1.125rem;
    font-weight: var(--book);
    line-height: 1.75rem;
    /* color: var(--white); */
    padding-bottom: 2rem;
  }

  .our-vision-body-copy p {
    font-size: 1.125rem;
    font-weight: var(--book);
    line-height: 1.75rem;
    /* color: var(--white); */
    color: inherit;
    padding-bottom: 2rem;
  }

  .corner-detail {
    position: absolute;
    width: 110px;
    height: 110px;
    top: -109px;
    right: -1px;
  }
  .vision-grid-mobile-top {
    display: none;
  }

  .vision-grid-mobile-bottom {
    display: none;
  }

  .vision-grid {
    display: block;
  }
}

/* this class stops the grid from hitting the copy*/
.vision-grid {
  grid-column: 1;
  grid-row: 1;
  position: absolute;
  left: 42vw;
  bottom: 0px;
  transform-origin: bottom right;
}

@media screen and (min-width: 1800px) {
  .vision-grid {
    position: unset;
    grid-column: 1;
    grid-row: 1;
    place-self: end end;
    transform-origin: bottom right;
  }
}