/*======================= HERO SECTION ====================*/
#hero { /* <section> with <header> inside */
  width: 100%; /* of .container */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Horizontally center */
  align-items: center;     /* Vertically center */     
  min-height: 100vh; /* Full viewport height */

  header {

    h1 {
      font-size: 6rem;
      margin-bottom: 0.5rem;

      @media (width < 576px) {
        font-size: 4rem;
      }
    }

    h2 {
      font-size: 2rem;
      margin-bottom: 2rem;

      @media (width < 576px) {
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
      }
    }

    p {
      margin-bottom: 1rem;      
      line-height: 1.5;
    }

    button {
      padding: 1rem;
      margin-bottom: 1rem;

      font-size: 1.2rem;
      font-weight: 600;

      @media (width < 576px) {
        font-size: 1rem;
        font-weight: 600;
      }

      border-radius: 20px;

      background-color: var(--yellow-bright);

      color: var(--black);

      cursor: pointer;
      
      a {
        text-decoration: none;
        color: inherit;
      }
    }

    button:hover {
      background-color: var(--yellow-muted);
    }
  }
}
/*==================== HERO SECTION / END =================*/

/* ABOUT FEATURES */
#features {
  display: grid;
  grid-template-columns: 1fr; /*mobile*/
  gap: 1.5rem;

  margin-bottom: 2rem;

  @media (width >= 768px) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  @media (width >= 992px) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  
  text-align:center;
  justify-content:center;
  
  .feature-card {
    justify-self: center; /* FOR GRID USE... */
    
    padding: 1rem;

    .feature-card-icon {
      font-size: 3rem;
    }

    .feature-card-description {
      padding-top: 1rem;
      flex-grow: 1;
    }

    hr {
      width: 100%;
    }
  }
}

h2 {
  margin: 1rem 0;
}

#about-page-details {
  color: var(--grey);

  h2 {
    margin-bottom: 1rem;
    color: light-dark(var(--grey-dark), var(--grey-light));
  }

  p {
    line-height: 1.5;
    margin-bottom: 1rem;
  }
}