/* 
  These are style configurations for the homepage.
  Specifically, these configs deal with the appearance and behavior of the feature cards in the
  "Who is EDU for?" Section.
*/

  /* This sets a grid to put the cards in */ 
  .features-grid {
    display: grid;
    gap: 2rem;
    margin-bottom: 4rem;
    grid-template-columns: repeat(3, 1fr);
  }
  /* For mobile screens, change the set up to one column */
  @media (max-width: 600px) { 
    .features-grid { 
      grid-template-columns: 1fr; 
    } 
  }

  /* This section, ".feature-card", is the styling configurations for the square cards. */
  .feature-card {
    position: relative; /* Allows it to be readjusted as needed */ 
    background: white; /* Ensures background is white even in dark mode */ 
    border: 2px solid #2b2b2b; /* Adds a border to the square card */ 
    border-radius: 6px; /* Rounds the edges of the square card */ 
    box-shadow: -10px 10px 0 #2b2b2b; /* Adds a dark box behind the card, it acts as a shadow for animation */ 
    transition: transform .25s ease, box-shadow .25s ease; /* Moves the box when hovered over (it makes it smoother, without this, the .feature-card:hover animation is more of a jump) */ 
    will-change: transform, box-shadow; /* Hint to the browser that these properties will animate, so it can optimize rendering for smoother performance. */
  }

  /* This section, ".feature-card:hover", lifts the box off the page when hovered over */
  .feature-card:hover {
    transform: translateY(-6px); /* Moves the card up on hover */
    box-shadow: -16px 16px 0 #2b2b2b; /* Increases the shadow size on hover to act like it is lifing off the page */
  }

  /* This section, ".feature-card a", styles the square card marked with the <a> tag, to make it clickable and a clean tile  */
  .feature-card a {
    width: 100%; /* Makes the card fill the entire width of the grid */
    height: 100%; /* Makes the card fill the entire height of the grid */
    padding: 1.75rem; /* Adds padding to the card */
    background: transparent;   /* ensure no black fill comes from global styles */
    border: 0; /* Removes the border from the card that is made by the link as default */
    display: block; /* The whole card is a block that is clickable */
  }