* {
  margin: 0;
  padding: 0;
}

body {
  background: #23262d;
}

.container {
  width: 400px;
  height: 400px;
  margin: 50px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 10px;
  transition: .3s;
}

.item:nth-child(1) {
  background: #ff6666;
}

.container:has(.item:nth-child(1):hover) {
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 2fr 1fr 1fr;
}

.item:nth-child(2) {
  background: #ffcc66;
}

.container:has(.item:nth-child(2):hover) {
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 2fr 1fr 1fr;
}

.item:nth-child(3) {
  background: #ccff66;
}

.container:has(.item:nth-child(3):hover) {
  grid-template-columns: 1fr 1fr 2fr;
  grid-template-rows: 2fr 1fr 1fr;
}

.item:nth-child(4) {
  background: #66ff66;
}

.container:has(.item:nth-child(4):hover) {
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 2fr 1fr;
}

.item:nth-child(5) {
  background: #66ffcc;
}

.container:has(.item:nth-child(5):hover) {
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 1fr 2fr 1fr;
}

.item:nth-child(6) {
  background: #66ccff;
}

.container:has(.item:nth-child(6):hover) {
  grid-template-columns: 1fr 1fr 2fr;
  grid-template-rows: 1fr 2fr 1fr;
}

.item:nth-child(7) {
  background: #6666ff;
}

.container:has(.item:nth-child(7):hover) {
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 2fr;
}

.item:nth-child(8) {
  background: #cc66ff;
}

.container:has(.item:nth-child(8):hover) {
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 1fr 1fr 2fr;
}

.item:nth-child(9) {
  background: #ff66cc;
}

.container:has(.item:nth-child(9):hover) {
  grid-template-columns: 1fr 1fr 2fr;
  grid-template-rows: 1fr 1fr 2fr;
}