@media screen and (min-width: 320px) {
    .site-title {
      font-size: 2.8em;
    }
    .site-description {
      font-size: 1.5em;
    }
  }
  
  @media screen and (min-width: 375px) {
    .site-title {
      font-size: 3em;
    }
    .site-description {
      font-size: 1.65em;
    }
  }
  
  @media screen and (min-width: 414px) {
    .site-title {
      font-size: 3.2em;
    }
    .site-description {
      font-size: 1.8em;
    }
  }
  
  @media screen and (min-width: 600px) {
    .cards {
      display: flex;
      gap: 1em;
      justify-content: space-between;
      flex-wrap: wrap;
    }
    .card {
      flex: 1 0 calc((100% / 3) - 2rem);
    }
  }
  
  @media screen and (min-width: 768px) {
    .site-title {
      font-size: 3em;
    }
    .site-description {
      font-size: 1.65em;
    }
    .about {
      margin-top: 2em;
      padding: 2em;
      flex-direction: row;
      justify-content: space-between;
    }
    .about-image {
      max-width: 50%;
      margin: 0;
    }
    .about-content {
      display: flex;
      flex-direction: column;
      max-width: 63%;
      align-items: flex-end;
    }
    .about-text {
      max-width: 70%;
      padding: 2em;
      margin: 1em 0;
    }
  }
  
  @media screen and (min-width: 1024px) {
    .heroImage {
      background-image: url(../images/homePage/MethodsAGI-Banner1.png);
      justify-content: flex-start;
      align-items: flex-end;
    }
    .heroContent {
      max-width: 600px;
      height: auto;
      color: rgba(255, 255, 255);
      text-align: left;
      padding-left: 1.5em;
      padding-bottom: 6.5em;
      margin-bottom: 4em;
    }
    .site-title {
      font-size: 3.45em;
    }
    .site-description {
      font-size: 1.75em;
    }
  }
  
  @media screen and (min-width: 1366px) {
    .site-title {
      font-size: 3.5em;
    }
    .site-description {
      font-size: 1.85em;
    }
  }
  
  @media screen and (min-width: 1920px) {
    .site-title {
      font-size: 3.6em;
    }
    .site-description {
      font-size: 1.95em;
    }
  }