Summer Grid

by pphheerroonn

HTML

<style><!--
#container {
    width: 100%;
    padding: 0;
    text-align: center;
position:relative;
  }
  
  .productGrid {
    overflow: auto;
    width: 100%;
    box-sizing: border-box;
  }
  
  .productGrid > div >img {
    max-width: 100%;
    max-height: 100%;
    display: inline-block;
    margin: auto;
  }
  
  .productGrid > div >p {
    display: none;
  }
.productGrid > div >a {
    color:white;
  }
  
  .productGrid > div.box {
    width: 12.2vw;
    height: 12.2vw;
    margin: 0;
    float: left;
    text-align: center;
    /*height: 157px;*/
    /*calc(width/aspect ratio)*/
  }
  
  .bigBox {
    margin-left: 0;
    background: #ED1C24;
    float: left;
    width: 14.2vw;
    height: 14.2vw;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  /* 
  .productGrid div:nth-child(2),
  .productGrid div:nth-child(4),
  .productGrid div:nth-child(6) {
    margin-left: 0;
    background: #f3999e;
    float: left;
    height: 0;
    width: 16.6%;
    padding-bottom: 16.6%;
    clear: right;
  }*/
  
  .productGrid div:nth-child(1) p {
    display: initial;
    color: white;
    font-family: "OpenSans Extrabold", OpenSans, Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-weight: heavy;
    font-size: 2em;
  }
  
  .productGrid div:nth-child(7) {
    margin-left: 0;
    background: #f3999e;
    clear: left;
  }
  
  .productGrid div:nth-child(9) {
    background: #7DCCC7;
    float: left;
  }
  
  .productGrid div:nth-child(11) {
    background: #A187BC;
    float: left;
  }
  
  .productGrid div:nth-child(13) {
    background: #C5DE9E;
    float: left;
  }
  
  .productGrid div:nth-child(15) {
    background: #8494C8;
    float: left;
  }
  
  .productGrid div:nth-child(17) {
    background: #FFF69E;
    float: left;
  }
  
  .productGrid div:nth-child(19) {
    background: #FCC58D;
    float: left;
  }
  
  .productGrid div:nth-child(21) {
    background: #20C0F1;
    float: left;
  }
  
  .productGrid div:nth-child(23) {
 ...