body {
  margin: 0;
  padding: 0 30px;
}

.container {
  max-width: 1080px;
  height: 768px;
  margin: 50px auto;
  
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-rows: 1fr;
  grid-template-areas: "a b c d"
    "e f f k"
    "l f f m"
    "n o p q";
  grid-gap: 3px;
}

.item {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3em;
  color: white;
  
  border-radius: 5px;
  cursor: pointer;
  transition: 0.5s;
}

.hover:hover{
  opacity: 0.7;
}
.hover:active{
  opacity: 0.5;
}
.active{
  opacity: 0.3;
}

.jumbo{
  transition: 0.7s;
}