body {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
  height: 100vh; 
  overflow: hidden;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: hsl(0, 0%, 25%); 
    color: white; 
    --icon-color: white;
  }
}

@media (prefers-color-scheme: light) {
  body {
    background-color: hsl(0, 0%, 95%); 
    color: black; 
    --icon-color: black;
  }
}

.top-left {
  position: absolute;
  top: 5vmin;
  left: 5vmin;
  z-index: 1;
}
.top-center {
  position: absolute;
  top: 0;
  z-index: 1;
}

.bottom-center {
  position: absolute;
  bottom: 2vmin;
  z-index: 1;
}

.top-right {
  position: absolute;
  top: 5vmin;
  right: 5vmin;
}

.bottom-left {
  position: absolute;
  bottom: 5vmin;
  left: 5vmin;
}

.bottom-right {
  position: absolute;
  bottom: 5vmin;
  right: 5vmin;
}


.grid-container {
  display: grid;
  gap: 1vmin;
  width: 50vmin;
  height: 50vmin;
  transform: rotate(45deg);
}
.grid-item {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}