.img-container {
  position: relative;
  width: 100%;
  max-width: 300px;
  margin: 0 auto; /* Center the image container */
  text-align: center;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 15px; /* Rounded corners for overlay */
  opacity: 0.4;
  transition: opacity 0.5s ease;
  pointer-events: none; /* Prevent overlay from blocking other elements */
}
.img-container:hover .overlay,
.img-container:focus .overlay {
  opacity: 0.7;
  border-style: solid;
  border-color: rgb(0, 64, 42);
}
.img-container img {
  width: 100%;
  height: 100%;
  border-radius: 15px; /* Rounded corners for image */
}

.Azul {
  background-color: rgb(228, 242, 253);
}

.Arena {
  background-color: rgb(255, 243, 229);
}

.Verde {
  background-color: rgb(231, 236, 220);
}

.Naranja {
  background-color: rgb(255, 239, 222);
}
    .SKY    { background-color:#0DA9FF; }
    .GREEN  { background-color:#00A443; }
    .FOREST { background-color:#00402A; }
    .SUNSET { background-color:#FF9C1A; }
    .SAND   { background-color:#FFF5EC; }