/* Base Styles */
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid-container {
  display: grid;
  height: 100%;
  width: 100%;
  grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
  grid-template-rows: 9% 1% 75% 1% 9% 5% ; /* Row heights */
  grid-template-columns: 10% 80% 10%;
  gap: 0px; /* Space between grid items */
  margin:0px;
  padding:0px;

}
.blk {

background-color: black;
  color: white; /* Adjust text color for contrast */
}
.grid-container.row-3 {
background-color: black;
  color: white; /* Adjust text color for contrast */
}
.grid-item {
  padding: 0; /* Removes padding inside grid items */
  margin:0;
  border:none
}
.left-column,
.right-column {
  min-width: 10%;
  max-width: 10%;
}

.item {
  background-color: orange;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
  border: 1px solid #ddd;
}

/* Responsive Styles for Mobile */
@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns for mobile */
    grid-template-rows: 9% 1% 75% 1% 9% 5% ; /* Same row behavior */
  grid-template-columns: 10% 80% 10%;
    gap: 0px; /* Smaller gap on mobile */
  }

  .item {
    font-size: 30px; /* Adjust font size for smaller screens */
  }
}