@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');

:root {
  --blue: #81ccf1;
  --yellow: #efc66a;
  --pink: #d8a6cb;
  --dark-pink: #c59ece;
  --purple: #9996cb;
}

body {
  font-family: 'Roboto', sans-serif;
  background-image: linear-gradient(to top, #9996cb, #ab99cc, #bb9dcd, #caa1cc, #d8a6cb);
  margin: 0;
  height: 100vh;
}

.container {
  display: grid;
  grid-template: repeat(10, 1fr) / repeat(10, 1fr);
  height: 100vh;
}

.item1 {
  background: var(--yellow);
  grid-column: 1 / 2;
  grid-row: 5 / 10;
}
.item2 {
  background: var(--blue);
  grid-column: 1 / 4;
  grid-row: 7 / 9;
  opacity: 75%;
}
.item3 {
  background: hotpink;
  grid-column: 5 / 8;
  grid-row: 6 / 11;
}
.item4 {
  border: 4px solid hotpink;
  grid-column: 6 / 9;
  grid-row: 5 / 8;
  
}
.item5 {
  border: 4px solid hotpink;
  grid-column: 7 / 10;
  grid-row: 3 / 9;
}
.item6 {
  display: grid;
  font-size: 40px;
  grid-column: 6 / 9;
  grid-row: 3 / 5;
  justify-items: center;
  align-items: center;
  
  /*border: 0.8px dotted black;*/
}
.item6 p {
  margin: 0;
}
.item7 {
  grid-column: 3 / 4;
  grid-row: 3 / 4;
  background: hotpink;
  
  /*border: 0.8px dotted black;*/
}
.item8 {
  display: grid;
  font-size: 20px;
  grid-column: 3 / 4;
  grid-row: 2 / 4;
  transform: rotate(270deg);
  /*border: 0.8px dotted black;*/
  
  align-items: end;
}

@media screen and (max-width: 768px) {
  .container {
    display: grid;
    grid-template: repeat(14, 1fr) / repeat(8, 1fr);
    
  }

  .item1 {
    
    grid-column: 1 / 2;
    grid-row: 10 / 15;
  }
  .item2 {
    
    grid-column: 1 / 4;
    grid-row: 12 / 14;
    
  }
  .item3 {
    
    grid-column: 3 / 6;
    grid-row: 6 / 11;
  }
  .item4 {
    
    grid-column: 4 / 7;
    grid-row: 5 / 8;
    
  }
  .item5 {
    
    grid-column: 5 / 8;
    grid-row: 3 / 9;
  }
  .item6 {
    
    grid-column: 4 / 7;
    grid-row: 3 / 5;
    
  }

}

@media screen and (max-width: 500px) {
  .container {
    display: grid;
    grid-template: repeat(17, 1fr) / repeat(5, 1fr);
    
  }

  .item1 {
    
    grid-column: 1 / 2;
    grid-row: 13 / 18;
  }
  .item2 {
    
    grid-column: 1 / 4;
    grid-row: 15 / 17;
    
  }
  .item3 {
    
    grid-column: 1 / 3;
    grid-row: 7 / 12;
  }
  .item4 {
    
    grid-column: 2 / 4;
    grid-row: 6 / 9;
    
  }
  .item5 {
    
    grid-column: 3 / 5;
    grid-row: 4 / 10;
  }
  .item6 {
    
    grid-column: 2 / 4;
    grid-row: 4 / 6;
    
  }
  .item7 {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
    
  }
  .item8 {
    display: grid;
    font-size: 20px;
    grid-column: 3 / 4;
    grid-row: 1 / 3;
    transform: rotate(270deg);
    /*border: 0.8px dotted black;*/
    
    align-items: end;
  }
}