/* Estilos para telas com largura máxima de 580px */
@media (max-width: 580px) {

  /* Ajusta o espaçamento inferior dos links sociais */
  .kzr-social {
    margin: 0 0 1.625rem 0;
  }

  /* Define a direção dos links sociais como coluna, remove bordas, margens e paddings */
  .kzr-social a {
    flex-direction: column;
    border: none;
    margin: 0;
    padding: 0;
  }

  /* Remove o fundo ao passar o mouse sobre os links sociais */
  .kzr-social a:hover {
    background-color: transparent;
  }

  /* Ajusta o tamanho das imagens nos links sociais */
  .kzr-social a img {
    width: calc(1.25rem * var(--fator-aumento));
    height: calc(1.25rem * var(--fator-aumento));
    margin: 0 0 1rem 0;
  }

  /* Altera a direção dos elementos de contato para coluna e remove margens */
  .kzr-contact {
    flex-direction: column;
    margin: 0;
  }

  /* Ajusta margens e largura máxima dos links de contato */
  .kzr-contact a {
    margin: 0 0 0.9375rem 0;
    max-width: 100%;
  }

  /* Remove a margem direita do último link de contato */
  .kzr-contact a:last-child {
    margin: 0;
  }
}

/* Estilos para telas com largura máxima de 450px */
@media (max-width: 450px) {

  /* Ajusta o tamanho da imagem no cabeçalho */
  .kzr-header img {
    width: calc(12.5rem * var(--fator-reducao-450));
    height: calc(12.5rem * var(--fator-reducao-450));
  }

  /* Ajusta o tamanho da fonte do título no cabeçalho */
  .kzr-header h1 {
    font-size: calc(var(--tamanho-fonte-titulo) * var(--fator-reducao-450));
  }

  /* Ajusta o tamanho da fonte do parágrafo no cabeçalho */
  .kzr-header p {
    font-size: calc(var(--tamanho-fonte-corpo) * var(--fator-reducao-450));
  }

  /* Ajusta o tamanho da fonte dos links no menu de navegação */
  .kzr-menu ul li a {
    font-size: calc(var(--tamanho-fonte-pequena) * var(--fator-reducao-450));
  }

  /* Ajusta o tamanho da fonte do subtítulo no conteúdo principal */
  .kzr-main h2 {
    font-size: calc(var(--tamanho-fonte-subtitulo) * var(--fator-reducao-450));
  }

  /* Ajusta o tamanho da fonte dos parágrafos no conteúdo principal */
  .kzr-main p {
    font-size: calc(var(--tamanho-fonte-corpo) * var(--fator-reducao-450));
  }

  /* Ajusta o tamanho da fonte no botão */
  .kzr-button p {
    font-size: calc(var(--tamanho-fonte-pequena) * var(--fator-reducao-450));
  }

  /* Ajusta o tamanho da fonte dos parágrafos nos links sociais */
  .kzr-social a p {
    font-size: calc(var(--tamanho-fonte-pequena) * var(--fator-reducao-450));
  }

  /* Ajusta o tamanho da fonte dos parágrafos nos links de contato */
  .kzr-contact a p {
    font-size: calc(var(--tamanho-fonte-pequena) * var(--fator-reducao-450));
  }

  /* Ajusta o tamanho da fonte no rodapé */
  .kzr-footer p {
    font-size: calc(var(--tamanho-fonte-corpo) * var(--fator-reducao-450));
  }
}

/* Estilos para telas com largura máxima de 400px */
@media (max-width: 400px) {

  /* Ajusta o tamanho da imagem no cabeçalho */
  .kzr-header img {
    width: calc(12.5rem * var(--fator-reducao-400));
    height: calc(12.5rem * var(--fator-reducao-400));
  }

  /* Ajusta o tamanho da fonte do título no cabeçalho */
  .kzr-header h1 {
    font-size: calc(var(--tamanho-fonte-titulo) * var(--fator-reducao-400));
  }

  /* Ajusta o tamanho da fonte do parágrafo no cabeçalho */
  .kzr-header p {
    font-size: calc(var(--tamanho-fonte-corpo) * var(--fator-reducao-400));
  }

  /* Ajusta o tamanho da fonte dos links no menu de navegação */
  .kzr-menu ul li a {
    font-size: calc(var(--tamanho-fonte-pequena) * var(--fator-reducao-400));
  }

  /* Ajusta o tamanho da fonte do subtítulo no conteúdo principal */
  .kzr-main h2 {
    font-size: calc(var(--tamanho-fonte-subtitulo) * var(--fator-reducao-400));
  }

  /* Ajusta o tamanho da fonte dos parágrafos no conteúdo principal */
  .kzr-main p {
    font-size: calc(var(--tamanho-fonte-corpo) * var(--fator-reducao-400));
  }

  /* Ajusta o tamanho da fonte no botão */
  .kzr-button p {
    font-size: calc(var(--tamanho-fonte-pequena) * var(--fator-reducao-400));
  }

  /* Ajusta o tamanho da fonte dos parágrafos nos links sociais */
  .kzr-social a p {
    font-size: calc(var(--tamanho-fonte-pequena) * var(--fator-reducao-400));
  }

  /* Ajusta o tamanho da fonte dos parágrafos nos links de contato */
  .kzr-contact a p {
    font-size: calc(var(--tamanho-fonte-pequena) * var(--fator-reducao-400));
  }

  /* Ajusta o tamanho da fonte no rodapé */
  .kzr-footer p {
    font-size: calc(var(--tamanho-fonte-corpo) * var(--fator-reducao-400));
  }
}

/* Estilos para telas com largura máxima de 350px */
@media (max-width: 350px) {

  /* Ajusta o tamanho da imagem no cabeçalho */
  .kzr-header img {
    width: calc(12.5rem * var(--fator-reducao-350));
    height: calc(12.5rem * var(--fator-reducao-350));
  }

  /* Ajusta o tamanho da fonte do título no cabeçalho */
  .kzr-header h1 {
    font-size: calc(var(--tamanho-fonte-titulo) * var(--fator-reducao-350));
  }

  /* Ajusta o tamanho da fonte do parágrafo no cabeçalho */
  .kzr-header p {
    font-size: calc(var(--tamanho-fonte-corpo) * var(--fator-reducao-350));
  }

  /* Ajusta o tamanho da fonte dos links no menu de navegação */
  .kzr-menu ul li a {
    font-size: calc(var(--tamanho-fonte-pequena) * var(--fator-reducao-350));
  }

  /* Ajusta o tamanho da fonte do subtítulo no conteúdo principal */
  .kzr-main h2 {
    font-size: calc(var(--tamanho-fonte-subtitulo) * var(--fator-reducao-350));
  }

  /* Ajusta o tamanho da fonte dos parágrafos no conteúdo principal */
  .kzr-main p {
    font-size: calc(var(--tamanho-fonte-corpo) * var(--fator-reducao-350));
  }

  /* Ajusta o tamanho da fonte no botão */
  .kzr-button p {
    font-size: calc(var(--tamanho-fonte-pequena) * var(--fator-reducao-350));
  }

  /* Ajusta o tamanho da fonte dos parágrafos nos links sociais */
  .kzr-social a p {
    font-size: calc(var(--tamanho-fonte-pequena) * var(--fator-reducao-350));
  }

  /* Ajusta o tamanho da fonte dos parágrafos nos links de contato */
  .kzr-contact a p {
    font-size: calc(var(--tamanho-fonte-pequena) * var(--fator-reducao-350));
  }

  /* Ajusta o tamanho da fonte no rodapé */
  .kzr-footer p {
    font-size: calc(var(--tamanho-fonte-corpo) * var(--fator-reducao-350));
  }
}