/* general style */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}

/* nav styles */

nav a {
  text-decoration: none;
  margin-left: 15px;
  font-size: 16px;
}

/* block styles */
.item {
  display: flex;
  align-items: center;
   justify-content: center;
  font-size: 40px;
  height: 100px;
}

/* bloc colors */
.bloc1  {
   background-color: #6b3fa0; 
  }
.bloc2  {
   background-color: #255d92;
   }
.bloc3  {
   background-color: #218cd8; 
  }
.bloc4  { 
  background-color: #48b06e; 
}
.bloc5  { background-color: #44a641; 
}
.bloc6  { 
  background-color: #d0bd29;
 }
.bloc7  { background-color: #f0e220; 
}
.bloc8  { background-color: #cd6b1a; }
.bloc9  { 
  background-color: #d83a28;
}
.bloc10 { background-color: #ae256a;
 }

/* grid layout*/

/* original on mobile */

#page1-grid {
  display: grid;
  grid-template-columns: 100%;
  gap: 10px;
  padding: 10px;
}


@media (min-width: 768px) {
  #page1-grid {
    grid-template-columns: 33.3% 33.3% 33.4%;
  }

  #page1-bloc1  { 
    grid-column: 1 / 4; height: 200px;}
  #page1-bloc2  { 
    grid-column: 1 / 2; }
  #page1-bloc3  {
    
    grid-column: 2 / 3; }
  #page1-bloc4  { grid-column: 3 / 4; }
  #page1-bloc5  { 
    grid-column: 1 / 3; height: 300px; }
  #page1-bloc6  {
     grid-column: 3 / 4; }
  #page1-bloc7  { grid-column: 3 / 4; }
  #page1-bloc8  { 
    grid-column: 1 / 2; }
  #page1-bloc9  { 
    grid-column: 2 / 4; }
  #page1-bloc10 { grid-column: 1 / 4; height: 200px; }
}


@media (min-width: 1024px) {
  #page1-grid {
    grid-template-columns: 25% 25% 25% 25%;
  }

  #page1-bloc1  { 
    grid-column: 1 / 4; grid-row: 1; }
  #page1-bloc2  { 
    grid-column: 1 / 2; grid-row: 2; }
  #page1-bloc3  { grid-column: 2 / 4; grid-row: 2; }
  #page1-bloc4  { 
    grid-column: 1 / 4; grid-row: 3; }
  #page1-bloc5  { 
    grid-column: 1 / 2; grid-row: 4; }
  #page1-bloc6  { 
    grid-column: 2 / 3; grid-row: 4; }
  #page1-bloc7  { 
    grid-column: 3 / 4; grid-row: 4; }
  #page1-bloc8  { 
    grid-column: 4 / 5; grid-row: 1 / 3; height: 300px; }
  #page1-bloc9  { 
    grid-column: 4 / 5; grid-row: 3; }
  #page1-bloc10 { 
    grid-column: 4 / 5; grid-row: 4; }
}