html {
  box-sizing: border-box;
}
*, *:before, *:after 
{
  box-sizing: inherit;
}

body {
  font-family: Arial, Geneva, sans-serif;
}

a {
  color: #2772B0;
}

/* Wrapper */
.wrapper {
  width:97%;
  max-width: 1200px;
  margin: 0 auto;
  background-color: transparent;
  }

/* Images */
div img {
  width: 100%;
  max-width: 225px;
}

/* Replaced all flex with grid */
.row {
  display: grid; /* enables the CSS Grid */
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  grid-auto-rows: minmax(150px, auto);
}

/* Grid items */
.col-1 {
  grid-column: span 1; /* one column */
  background-color: #A3CDD9;
  padding: 10px;
}

.col-2 {
  grid-column: span 2; /* two columns */
  background-color: #FFFCE6;
  padding: 10px;
}

/*spacial layouts needed*/

.row-4 .col-2 {
  grid-column: span 4;
}

/* The design for each version*/
/*Tablet version */
@media only screen and (max-width: 768px) {
  .row {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* Mobile version  */
@media only screen and (max-width: 480px) {
  .row {
    grid-template-columns: 1fr;
  }
}

/* how images will look*/
.row img {
  width: 100%;
  height: auto;
  display: block;
}

/*Video backgorund for more professionalism*/
.video-background {
  position: fixed;
  top: 0;
  left: 0;
  width:  100%;
  height: 100%;
  overflow:hidden;
  z-index:-1;
}
.video-background video {
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
}

/*Reordering grid items on mobile usings order property*/
@media only screen and (max-width: 480px) {

  .row-6 .col-1:nth-child(5) { order: 1; }
  .row-6 .col-1:nth-child(1) { order: 2; }
  .row-6 .col-1:nth-child(2) { order: 3; }
  .row-6 .col-1:nth-child(3) { order: 4; }
   .row-6 .col-1:nth-child(4) { order: 5; }


}