* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  width: 100%;
  margin-block: 100px;
  display: grid;
  grid-template-rows: repeat(8, 100px);
  grid-template-columns: repeat(8, 100px);
  gap: 3px;
  justify-content: center;
  justify-items: center;
}
.box {
  border-radius: 5px;
  width: 100px;
  min-height: 100px;
  background-position: center;
  background-size: cover;
  transition: 0.6s all;
  filter:grayscale(100%);
  object-fit: cover;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box:hover {
  transform: scale(2);
  filter: grayscale(0%);
  z-index: 1;
}
#img {
  height: 90px;
  width: 90px;
  padding: 10px;
  filter: grayscale(50%);
}
#box1,
#box3,
#box5,
#box7,
#box10,
#box12,
#box14,
#box16,
#box17,
#box19,
#box21,
#box23,
#box26,
#box28,
#box30,
#box32,
#box33,
#box35,
#box37,
#box39,
#box42,
#box44,
#box46,
#box48,
#box49,
#box51,
#box53,
#box55,
#box58,
#box60,
#box62,
#box64 {
  background-color: tomato;
}
#box2,
#box4,
#box6,
#box8,
#box9,
#box11,
#box13,
#box15,
#box18,
#box20,
#box22,
#box24,
#box25,
#box27,
#box29,
#box31,
#box34,
#box36,
#box38,
#box40,
#box41,
#box43,
#box45,
#box47,
#box50,
#box52,
#box54,
#box56,
#box57,
#box59,
#box61,
#box63 {
  background-color: lightgoldenrodyellow;
}