.button-container {
    display: flex;
    flex-direction: column; /* Stacks the button rows vertically */
    gap: 2px; /* Adds space between the rows */
    padding: 0px;
    width: fit-content; /* Adjusts container width to content */
    margin: 0px auto; /* Centers the container */
}

.button-row {
    display: flex;
    justify-content: center; /* Centers buttons horizontally within the row */
    gap: 2px; /* Adds space between buttons in a row */
}

.btn {
  display: grid;
    width: 6vw; /* Set desired width */
    height: 6vw; /* Set height equal to width for a square */	
    cursor: pointer;
    border: 1px solid #009bff;
    background-color: #009bff;
    background-size: cover;
    color: white;
    border-radius: 3px;
    transition: background-color 0.3s ease;
    gap: 0px;	
    margin: 0px;
    padding: 0px;
    place-items: center; 
    grid-template-columns: 1px auto 1px;
    grid-template-rows: 1px 5fr 1fr 1px;
}

.btn.clicked {
  background-color: red;
}

.i {
  /* Icon styling */
  grid-column: 2;
  grid-row: 2;
  width: auto;
  height: auto;
  min-width: 1px;
  min-height: 1px;

  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  padding: 0px;
place-items: center; 
}

.d {
  /* Text styling */
  grid-column: 2;
  grid-row: 3;
    white-space: nowrap;
justify-content: center;
    line-height: 1px;
}

.btn:hover {
    background-color: #0056b3;
}

.btn.clicked:hover {
    background-color: #FF4444;
}