body {
  background-color: black;
  color: yellow;
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 15px;
}

a {
  font-size: 24px;
  color: yellow;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Layout do topo */
.topo-esquerda {
  width: 30%;
  float: left;
}
.topo-esquerda img {
  max-width: 100%;
  height: auto;
}
.topo-direita {
  width: 70%;
  float: right;
}

/* Layout dos produtos */
.produto-esquerda {
  width: 33%;
  float: left;
  height: 50%;
}
.produto-direita {
  width: 67%;
  float: right;
  height: 50%;
}
.produto-inferior {
  clear: both;
  height: 50%;
}

/* Responsividade configurada aqui ↓ */
/* Comentário: este trecho reorganiza os elementos para telas menores (celulares) */
@media (max-width: 768px) {
  .topo-esquerda, .topo-direita,
  .produto-esquerda, .produto-direita, .produto-inferior {
    width: 100% !important;
    float: none !important;
    height: auto !important;
  }
  body {
    font-size: 24px;
  }
}