/* Hover animation for the red image */
.red {
  width: 300px;
  height: 300px;
  transform-origin: center; /* scale from center */
  transition: transform 0.8s ease, box-shadow 0.5s ease;
  display: block;
  margin: 0 auto;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.red:hover {
  transform: scale(2); /* scale both X and Y */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}