* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

/* <!-- HERO SECTION ---------------------------------------------------------------------------------------------> */
/* <!-- HERO SECTION Opener ----------------!> */
.hero {
  height: 100vh;
  background: linear-gradient(to right, #1C449B 25%, #1C449B00 60%, #ffffff00), url('/assets/images/hero.jpg');/* Gradient + Background Image */
  background-size: cover;
  color: white;
}

.opener {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
  padding: 2.5em 6em 0 6em;
}

/* <!-- HERO SECTION Buttons ----------------!> */
.opener .buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);/* 2 columns */
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 20rem;
  grid-row-gap: 3.125rem;
  justify-content: center;
  width: 100%;
  margin-top: 3.125rem;
  padding: 0 5rem 0 5rem;
}

.two {
  grid-column: 1;
  grid-row: 2;
}

.three {
  grid-column: 2;
  grid-row: 2;
}

/* <!-- MEDIA QUERIES ---------------------------------------------------------------------------------------------> */
/* <!-- Laptop ----------------!> */
@media only screen and (min-width: 1025px) and (max-width: 1440px),
       only screen and (min-width: 768px) and (max-width: 1024px) {
  .hero {
    height: 100vh;
    background: linear-gradient(to right, #1C449B 40%, #1C449B00 75%, #ffffff00), url('/assets/images/hero.jpg');/* Gradient + Background Image */
    background-size: cover;
    color: white;
  }

  .opener .buttons {
    grid-column-gap: 2.375rem;
    grid-row-gap: 2.375rem;
  }
}

/* <!-- Laptop + Upscale ----------------!> */
@media (min-width: 1025px) and (max-width: 1440px) and (min-resolution: 120dpi) and (max-resolution: 150dpi) {
  .opener .buttons {
    grid-column-gap: 2.375rem;
    grid-row-gap: 1.5rem;
  }
}

/* <!-- Mobile ----------------!> */
@media only screen and (max-width: 767px),
       only screen and (orientation: portrait) {

  .hero {
    height: 100vh;
    background: linear-gradient(#1c449bc7 , #1c449bc7), url('/assets/images/hero.jpg');/* Gradient + Background Image */
    background-size: cover;
    background-position: 75%;
    color: white;
  }

  .opener {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
    padding: 2.5em 1.5rem 0 1.5rem;
  }

  .opener .buttons {
    grid-template-columns: 0;
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 0;
    grid-row-gap: 1rem;
    margin-top: 2rem;
    padding: 0 1rem 0 1rem;
  }

  .one {
    grid-column: none;
    grid-row: 1;
  }

  .two {
    grid-column: none;
    grid-row: 2;
  }

  .three {
    grid-column: none;
    grid-row: 3;
  }

}