style.css

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    padding: 0;
}


.container{
  display: grid;
  width: 748px;
  height: 748px;
  background-color: #000;
  grid-template-columns:320px 198px 153px 50px;
  grid-template-rows:414px 130px 155px 20px;
  gap: 9px;
}

.item{
  background-color: #f0f1ec;
}

.white1{
  background-color: #f0f1ec;
  grid-column: span 3;
}

.white2{
  background-color: #f0f1ec;
  grid-row: span 2;
}

.white3{
  background-color: #f0f1ec;
  grid-column: span 2;
  grid-row: span 2;
}

.white4{
  background-color: #f0f1ec;
  grid-row: span 2;
}

.red{
  background-color: #E72F24;
}

.blue{
  background-color: #004592;
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start: 4;
  grid-column-end: 5;
  border-bottom: 10px solid #000;
}

.black{
  background-color: #232629;
  grid-row-start: 4;
  grid-row-end: 5;
  grid-column-start: 3;
  grid-column-end: 4;
}

.yellow{
  background-color: #F9D01E;
  grid-row-start: 4;
  grid-row-end: 5;
  grid-column-start: 2;
  grid-column-end: 3;
}