@media screen and (min-width: 600px) {
  body {
    display: grid;
    grid-template-rows: repeat(2, 18em);
    grid-template-columns: repeat(4, 1fr);
    grid-auto-flow: row; /* Garante que os itens fluam apenas nas linhas */
    grid-auto-columns: 0; /* Evita criação de colunas extras */
    
    margin-top: 10vh;
  }

  h2 {
    font-size: .8em;
    line-height: 1.4em;
  }

  p {
    font-size: .7em;
  }

  .title {
    word-spacing: .2em;
    font-size: .6em;
  }

  .subtitle {
    line-height: 1.3em;
  }

  img {
    /* width: 2em; */
  }

  .clifford {
    background-image: url(../images/bg-pattern-quotation.svg);
    background-repeat: no-repeat;
    background-position-x: 30vw;
    grid-row: 1;
    grid-column: 1 / 3;
    line-height: .9em;
  }

  .walters {
    grid-column: 3;
    font-size: 1em;
  }

  .harmon {
    grid-column: 1;
  }

  .abrams {
    grid-column: 2 / 4;
  }

  .whittle {
    grid-column: 4; 
    grid-row: 1 / 3;
  }

  .attribution{
    grid-column: 2 / 4;
    display: inline;
  }
}

@media screen and (min-width: 900px) {
    body {
        padding-top: 0;
        margin-top: 1vh;
    }

    h2 {
        font-size: 1.1em;
        line-height: 1em;
    }

    .title {
        font-size: 1em;
    }

    p {
        font-size: .8em;
    }
    
    .attribution {
        margin-top: -1em;
        font-size: 1em;
    }
}

@media screen and (min-width: 1200px) {
    body {
        padding-top: 0;
        margin-top: 1vh;
        margin-right: 5em;
        margin-left: 5em;
    }
    
    h2 {
        font-size: 1.2em;
        line-height: 1.2em;
    }

    p {
        font-size: .8em;
    }
    
    .attribution {
        font-size: 1em;
    }
    
}