#3095139 OBJETIVA CONCURSOS - 2024 - Analista (Pref Maripá)/Sistemas

Considerar o trecho de uma página HTML:

<html>
   <head>
       <title>Minha página</title>
   </head>
   <body>
      <div id="conteudo">
         <h1>Meu título</h1>
         <p>Meu parágrafo</p>
        <img src="imagem.jpg" alt="Minha imagem" />
     </div>
</body>
</html>

Pedro é um programador frontend, e seu superior pediu para que ele posicionasse a imagem no canto superior direito da tela, com um espaçamento pequeno entre a borda da imagem e a borda da tela, mas somente quando a largura da janela do navegador for inferior à largura de uma tela com resolução HD.

Qual dos trechos de código CSS abaixo soluciona CORRETAMENTE a tarefa de Pedro?

@media (max-width: 1280px) {
       img {
   position: absolute;
   top: 0;
   right: 0;
   margin: 0.5rem;
        }
      }
@media (max-width: 1280px) {
     #conteudo {
       position: relative;
     }
     img {
       position: absolute;
       top: 0;
       right: 0;
       margin: 1rem;
     }
   }
@media (max-width: 720px) {
       img {
        position: absolute;
        top: 0;
        right: 0;
        margin: 8px 16px;
      }
    }
@media (max-width: 1080px) {
       #conteudo {
         position: absolute;
         top: 0;
         right: 0;
         margin: 0.75rem;
       }
     }