@media (max-width: 48rem) {
  .pagina {
    width: min(100% - 3rem, 45rem);
  }

  .apresentacao {
    grid-template-columns: minmax(0, 1fr) minmax(10rem, 0.55fr);
    gap: 1.5rem;
  }

  .personagens-institucionais {
    max-height: 13rem;
  }

  .cartao-oficina {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .cartao-oficina .botao {
    justify-self: start;
  }
}

@media (max-width: 37.5rem) {
  .pagina {
    width: 100%;
    padding: 1rem;
  }

  .apresentacao {
    grid-template-columns: minmax(0, 1fr) minmax(7rem, 0.45fr);
    gap: 1rem;
    padding: 1.25rem;
  }

  .personagens-institucionais {
    max-height: 10rem;
  }

  .secao-oficinas,
  .secao-laboratorios {
    margin-block-start: 1.5rem;
  }

  .cartao {
    padding: 1rem;
  }

  .cartao-laboratorio-referencia {
    grid-template-columns: minmax(0, 1fr);
  }

  .representacao-material {
    min-height: 8rem;
  }

  .botao {
    min-height: 3rem;
  }
}

@media (max-width: 24rem) {
  .apresentacao {
    grid-template-columns: minmax(0, 1fr);
  }

  .personagens-institucionais {
    width: min(100%, 14rem);
    justify-self: center;
  }

  .cartao-oficina .botao {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
}