.flex-item-inflate {
  flex: 1; /* Standard flex item sizing */
  padding: 20px;
  background-color: var(--bs-dark-subtle);
  border: 1px solid var(--bs-border-color);
  border-radius: 8px;
  outline: none; /* Clears default browser outline */
  
  /* Crucial: Smoothly transitions the transform effect over 0.2 seconds */
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* The state that fires when a user clicks, touches, or tabs to the element */
.flex-item-inflate:focus {
  transform: scale(1.05); /* Inflates the element by 5% */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); /* Adds depth to emphasize height */
  border-color: var(--bs-primary); /* Optional: changes border color on focus */
}