body {
  background-image: linear-gradient(90deg, rgba(0,122,124,1) 0%, rgba(0,122,124,1) 35%, rgba(82,38,131,1) 100%);
  }

p {
  font-family: 'IBM Plex Serif', serif;
  color: #d9d9d8;
  font-size: 0.95em;
  font-weight: 300;
  line-height: 0.4rem;
}

h1 {
  font-family: 'IBM Plex Serif', sans-serif;
  color: #d9d9d8;
  font-size: 1.2rem;
  font-weight: 300;
}

h2, h3 {
  font-family: 'Lexend Deca', sans-serif;
  color: #d9d9d8;
  font-size: 1.05em;
  font-weight: 500;
}

.hero-container {
  height: 90vh;
  margin: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

.hero-image {
  width: 95%;
}

.hero-subtitle  {
  width: 80vw;
}

a:link {
  font-family: 'IBM Plex Serif', serif;
  color: #d9d9d8;
  font-size: 0.95em;
  font-weight: 300;
  line-height: 0.4;
  color: white;
  text-decoration: none;
  border-bottom: 1px solid rgba(211,113,28,1);
}

a {
  font-family: 'IBM Plex Serif', serif;
  color: #d9d9d8;
  font-size: 0.95em;
  font-weight: 300;
  line-height: 0.4;
  color: white;
  text-decoration: none;
  border-bottom: 1px solid rgba(211,113,28,1);
}

a:link:hover {
  color: rgba(211,113,28,1);
  border-bottom: 1px solid rgb(255,255,255);
}

a:hover {
  color: rgba(211,113,28,1);
  border-bottom: 1px solid rgb(255,255,255);
}

footer {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(182,182,184);
  width: 100%;
  max-height: 2.5rem;
  position: absolute;
  bottom: 2vh;
  left: 0;
}

strong {
  color: rgba(82,38,131);
  font-size: 1.25em;
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 500;
  letter-spacing: 0.03em;
}

  /* ///// HELPERS ////// */

.tagline-centered {
  text-align: center;
}
/* BREAKPOINT 1 (320) /////////////////////////////////////////////////////////////*/

@media only screen and (min-width: 320px) {

  .hero-image {
    width: 80%;
  }

  .hero-subtitle  h1 {
    font-size: 1.28rem;
  }

}

/* BREAKPOINT 1 (480) /////////////////////////////////////////////////////////////*/

@media only screen and (min-width: 480px) {

  .hero-container {
    height: 90vh;
    margin: 2rem 2rem;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .hero-item-one  {
    width: 55%;
  }

  .hero-image {
    width: 90%;
  }

  .hero-item-two  {
    width: 34%;
  }

  .hero-subtitle  {
    width: 100%;
  }

  .hero-subtitle  h1 {
    font-size: 1.42rem;
  }

  footer  {
    height: 9vh;
  }

  strong {
    font-size: 1.4em;
    letter-spacing: 0.02em;
  }
}

/* BREAKPOINT 1 (768) ///////////////////////////////////////////////////////////*/

@media only screen and (min-width: 768px) {

  .hero-container {
    margin: 3rem 3rem;
  }

  .hero-image {
    max-width: 75%;
  }

  .hero-subtitle  h1 {
    font-size: 1.5rem;
  }

  .hero-item-two  {
    width: 39%;
  }

  .hero-item-two h3  {
    padding-left: 8vw;
  }

  .hero-item-two p  {
    padding-left: 8vw;
  }

}
  /* BREAKPOINT 1 (1024) ///////////////////////////////////////////////////////////*/

@media only screen and (min-width: 1024px) {

    .hero-container {
      margin: 7rem 6rem;
    }

    .hero-image {
      max-width: 28rem;
    }

    .hero-subtitle  h1 {
      font-size: 1.5rem;
    }

    .hero-item-two  h3 {
      padding-left: 11vw;
      font-size: 1.15em;
    }

    .hero-item-two  p {
      font-size: 1em;
      padding-left: 11vw;
      line-height: 0.5;
    }

}
  /* BREAKPOINT 1 (1440) ///////////////////////////////////////////////////////////*/

  @media only screen and (min-width: 1440px) {

    .hero-container {
      margin: 7rem 7rem;
    }

    .hero-image {
      max-width: 27rem;
    }

    .hero-subtitle  h1 {
      font-size: 1.55rem;
    }

    .hero-item-two  h3 {
      padding-left: 18vw;
      font-size: 1.15em;
    }

    .hero-item-two  p {
      font-size: 1em;
      padding-left: 18vw;
      line-height: 0.5;
    }

    strong {
      font-size: 1.55em;
    }

  }

  /* BREAKPOINT 1 (1800) ///////////////////////////////////////////////////////////*/