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

.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.flex-grow {
  flex-grow: 1;
}
.h-screen {
  height: 100vh;
}

.w-screen {
  width: 100vw;
}

.grid {
  display: grid;
  gap: 4px;
}
.overflow-hidden {
    overflow: hidden;
}

.grid-column {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.grid-row {
  grid-template-rows: repeat(5, minmax(0, 1fr));
}

.bg-blue {
  background-color: aqua;
}

.bg-green {
  background-color: lightgreen;
}

.grid-item {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    background-color: yellow;
    grid-column-start: 2;
    grid-row-start: 3;
}