HTML - Código para 9 recuadros con media query

 

CÓDIGO HTML5

<main>

<!-------------- 1ERA SECCION -------------->

  <div class="row">

    <div class="column">

      <a href="https://www.paramountplus.com/"><img src="../img/paramountplus.jpg" alt="Paramount +" style="width:100%"></a>

    </div>

    <div class="column">

      <a href="https://play.hbomax.com/page/urn:hbo:page:home"><img src="img/hbo.png" alt="HBO Max" style="width:100%"></a>

    </div>

    <div class="column">

      <a href="https://disneyplus.com/"><img src="img/disneyplus.jpg" alt="Disney +" style="width:100%"></a>

    </div>    

    <div class="column">

      <a href="https://www.netflix.com/browse"><img src="img/netflix.jpg" alt="Netflix" style="width:100%"></a>

    </div>

    <div class="column">

      <a href="https://www.starplus.com/"><img src="img/starplus.jpg" alt="Star +" style="width:100%"></a>

    </div>

    <div class="column">

      <a href="https://vix.com/es-es/ondemandplus"><img src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AAZOpTJ.img?h=0&w=600&m=6&q=60&u=t&o=f&l=f" alt="Vix +" style="width:100%"></a>

    </div>

    <div class="column">

      <a href="https://serieslan.com/dragon-ball-gt"><img src="img/dragonballgt.jpg" alt="Dragon Ball GT" title="Dragon Ball GT" style="width:100%"></a>

    </div>

    <div class="column">

      <a href="https://serieslan.com/los-caballeros-del-zodiaco"><img src="https://i0.wp.com/lacomikeria.com/wp-content/uploads/2022/02/33D1123B-9E73-40F4-A189-B74FDE357C54.jpeg?resize=600%2C400&ssl=1" alt="Caballeros del Zodiaco" title="Caballeros del Zodiaco" style="width:100%"></a>

    </div>

    <div class="column">

      <a href="https://vix.com/es-es/ondemandplus"><img src="img/livetv.jpg" alt="Vix +" style="width:100%"></a>

    </div>

  </div>

<!-------------- 2DA SECCION -------------->

  <div class="row">

    <div class="column">

      <a href="https://www.paramountplus.com/"><img src="../img/paramountplus.jpg" alt="Paramount +" style="width:100%"></a>

    </div>

.

.

.

</main>

CÓDIGO CSS

/************* MAIN *************/

main{

    width: 100%;

    height: auto;

    display: flex;

    flex-flow: row wrap;

    align-items: center;

    justify-content: center;

}

.column {

    float: left;

    width: 11%;

    padding: 5px;

  }

 

  /* Clearfix (clear floats) */

  .row::after {

    content: "";

    clear: both;

    display: table;

  }

main img{

    border-radius: 6px;

    border: .5px solid rgba(128, 128, 128, 0.301);

}

main img:hover{

    transition: .5s ease all;

    transform: scale(1.1);

}

@media screen and (min-width: 200px) and (max-width: 750px){

    .column{

        float: left;

        width: 33%;

        padding: 5px;

    }

}