/* =============================================================== 
  Media queries for website responsiveness
*/
/* Set rem based on viewport width */
@media (width > 500px) {
  :root {
    font-size: calc(16px + 9 * ((100vw - 500px) / (2000 - 500)));
  }
}
@media (width <= 500px) {
  :root {
    font-size: 16px;
  }
}

@media screen and (width < 800px) {
  /* Make gap scale with viewport width */
  .homepage-buttons {
    gap: 5vw;
  }
  /* Hide upper text in homepage buttons */
  .homepage-buttons > .vertical-card > :first-child {
    display: none;
  }
  /* Lower text in homepage buttons */
  .homepage-buttons > .vertical-card > :last-child {
    font-size: calc(2.9vw + 0.15rem);
  }
  /* Homepage buttons Cards */
  .homepage-buttons > .vertical-card {
    background-color: var(--md-primary-fg-color--dark);
    height: 8vw;
    border-radius: 2vw;
  }
}

@media screen and (width > 650px) {
  .small-card {
    max-height: 5rem;
    max-width: 40%;
  }
}
@media screen and (width <= 650px) {
  .vertical-card {
    width: 40%;
  }
  
  /* Change the horizontal card to be rendered as a vertical one with aspect-ratio 1 */
  /* .horizontal-card {
    align-items: center;
    flex-direction: column;
    height: auto;
    aspect-ratio: 1;
    width: 40%;
    container-type: inline-size;
  } */
  .horizontal-card {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40%;
    min-height: 0;
    container-type: inline-size;
    padding: 0.4rem;
    gap: 0.2rem;
    aspect-ratio: 1/1;
  }
  .horizontal-card > .card-text-container {
    height: 30%;
    flex: 0 0 auto;
    font-size: 10cqi;
    font-weight: 600;
  }
  .horizontal-card > .card-text-container > *:last-child:not(:only-child) {
    display: none;
  }
  .horizontal-card > .card-text-container > *:first-child:not(:only-child) {
    margin-bottom: 0;
  }
  .horizontal-card > .card-image-container {
    flex-basis: 70%;
  }
  /* Wrap homepage navigation cards */
  .homepage-navigation {
    flex-wrap: wrap;
  }

  /* Make squared btn */
  .header-btn {
    flex-basis: 0;
    flex-grow: 0;
    aspect-ratio: 1;
    justify-self: start;
    height: 2rem;
  }
  /* Increase btn Logos */
  .header-btn > :first-child > * {
    font-size: 1.8em;
  }
  /* Hide btn Text */
  .header-btn >:last-child {
    display: none;
  }
  
  /* Homepage introduction paragraph */
  /* Upper text */
  .introduction > :first-child > :first-child {
    font-size: calc(4.9vw + 0.15rem);
  }
  /* Lower text */
  .introduction > :first-child > :last-child {
    font-size: calc(2.9vw + 0.15rem);
   }
  
  /* Footer */
  :is(.funding,.partners) > *:first-child {
    font-size: calc(1vw + 0.5rem);
  }
  :is(.funding,.partners) > *:last-child a {
    max-width: calc(6vw + 2rem);
  }

  .md-footer-meta__inner {
    flex-direction: column;
  }
  .md-footer-meta__inner > * {
    gap: 1rem;
  }
}

@media screen and (width <= 450px) {
  /* Hide title in header */
  .md-header__title {
    visibility: hidden;
  }
}

/* Keep logo always visible for mobile devices */
@media screen and (max-width: 76.1875em) {
  .md-header__button.md-logo {
    display: flex;
  }
}