.section-intro {
  display: grid;
  grid: auto-flow/minmax(1em, 1fr) minmax(300px, 650px) minmax(1em, 1fr);
  padding: 5em 0 0;

  background-image: url(./../imgs/flower-background-1.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  padding: 10vh 0;
  text-align: center;
  min-height: 500px;

  position: relative;
  z-index: 1;
}
.section-intro::before{
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--clr-section-intro-before-bg-linear);
  z-index: -1;
}

.section-intro__logo {
  grid-column: 2/3;
  margin-bottom: 2.5em;
  width: 250px;
  margin: 2em auto;
  display: block;
}

.intro__text {
  grid-column: 2/3;
  position: relative;
  color: var(--clr-section-intro-text-white);
  align-self: center;
}

.logo--light *{
  fill: var(--clr-section-intro-logo-light);
}

@media (width < 700px) {
  .section-intro{
    background-position: 50%;
  }
}

@media (width > 700px) {
  .section-intro{
    background-position: 0% 25%;
  } 
}