.box{background-color:red;padding:30px;color:#fff;font-size:20px;text-align:center}.box:nth-child(1){background-color:#1abc9c}.box:nth-child(2){background-color:#2ecc71}.box:nth-child(3){background-color:#3498db}.box:nth-child(4){background-color:#9b59b6}.box:nth-child(5){background-color:#34495e}.box:nth-child(6){background-color:#f1c40f}.box:nth-child(7){background-color:#e67e22}.box:nth-child(8){background-color:#e74c3c}.box:nth-child(9){background-color:#7f8c8d}.box:nth-child(10){background-color:#95a5a6}.box:nth-child(11){background-color:#686de0}.box:nth-child(12){background-color:#30336b}section{border:4px solid #000;margin-bottom:100px}.section-0 .grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(100px,auto);grid-column-gap:15px;grid-row-gap:15px}.section-1 .grid{display:grid;grid-template-columns:1fr min-content minmax(100px,max-content);grid-template-rows:100px 50px 100px 200px}.x0-5{grid-column:1/span 5}.x1-3{grid-column:2/span 3}.x1-4{grid-column:2/span 4}.x1-5{grid-column:2/span 5}.x1-6{grid-column:2/span 6}.x3-1{grid-column:4/span 1}.x3-3{grid-column:4/span 3}.x4-4{grid-column:5/span 4}.x5-6{grid-column:6/span 6}.x6-1{grid-column:7/span 1}.x6-4{grid-column:7/span 4}.y2-2{grid-row:3/span 2}.y2-3{grid-row:3/span 3}.y1-3{grid-row:2/span 3}.y4-2{grid-row:5/span 2}.y4-3{grid-row:5/span 3}.y4-1{grid-row:5/span 1}.b-photo{position:relative}.b-photo img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center}.section-a .grid,.section-b .grid,.section-c .grid{width:100vw;display:grid;grid-template-columns:1vw 2vw 4vw repeat(5,1fr) 4vw 2vw 1vw;grid-template-rows:14.2vw;grid-auto-rows:14.2vw;grid-auto-flow:row;grid-gap:1.5vw;grid-gap:10px;margin-bottom:1.5vw}