/* Main layout structure */
#orange-universe {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 1fr 2fr 1fr;
  gap: 0;
  z-index: 10;
}

/* Quadrants for image placement */
.quadrant {
  position: relative;
  overflow: hidden;
  /* Debug border - remove later */
  /* border: 1px dashed rgba(255, 255, 255, 0.2); */
}

.quadrant[data-quadrant="1"] { grid-area: 1 / 1; }
.quadrant[data-quadrant="2"] { grid-area: 1 / 2; }
.quadrant[data-quadrant="3"] { grid-area: 1 / 3; }
.quadrant[data-quadrant="4"] { grid-area: 2 / 1; }
.quadrant[data-quadrant="5"] { grid-area: 2 / 3; }
.quadrant[data-quadrant="6"] { grid-area: 3 / 1; }
.quadrant[data-quadrant="7"] { grid-area: 3 / 2; }
.quadrant[data-quadrant="8"] { grid-area: 3 / 3; }

/* Central blog container */
#blog-container {
  grid-area: 2 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  z-index: 20;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  :root {
    --corner-size: 50px;
    --corner-height: 30px;
  }
  
  #orange-universe {
    grid-template-columns: 0.5fr 3fr 0.5fr;
  }
  
  #blog-container {
    padding: 1rem;
  }
}

@media (min-width: 1920px) {
  :root {
    --corner-size: 120px;
    --corner-height: 70px;
  }
}