HTML/CSS - Responsive Product Item Online Editor and JavaScript Compiler

html

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <div class="card">
  <div class="imgBox">
    <img src="https://sieteveintecl.vtexassets.com/arquivos/ids/320181-800-auto?v=637848717077600000&width=800&height=auto&aspect=true" 
    
    alt="" class="mouse">
  </div>
  <div class="contentBox">
    <h3>Polera Hombre Space BURTON</h3>
    <h2 class="price"><DEL>$18.990</DEL>
$9.490</h2>
    <a href="https://ad.soicos.com/-1ksK?trackerID=PAGINAWEB&dl=https%3A%2F%2Fwww.7veinte.cl%2Fpolera-m-c-hombre-space-logo-burton-bu35436297-sat%2Fp" class="buy">COMPRAR</a>
  </div>
</div>
<br><!-- PAGINA SIGUIENTE -->
<br><!-- PAGINA SIGUIENTE -->
<div class="card">
  <div class="imgBox">

css

@import url("https://fonts.googleapis.com/css2?family=Istok+Web:wght@400;700&display=swap");
* {
  margin: auto;
  padding: auto;
  font-family: "Istok Web", sans-serif;
}
body {
  display: list-item;
  justify-content: auto;
  align-items: auto;
  min-height: 1000vw;
  background:;
  background-image:url('https://www.xtrafondos.com/wallpapers/vertical/poligonos-de-colores-7888.jpg');
    background-size:cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.card {
  position: relative;
  width: 320px;
  height: 500px;
  background:  #ffffff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 8px 0  rgba(0, 0, 0, 0.2);
  

BROWSER

Console