/* Overall slot list container */
.slot-list {
  display: flex; /* Arrange items horizontally */
  flex-wrap: wrap; /* Wrap items onto multiple lines if needed */
  justify-content: space-around; /* Distribute items evenly with space around them */
}

/* Each individual slot card */
.slot-card__wrap {
  width: 200px; /* Adjust width as needed */
  margin-bottom: 20px; /* Space between cards */
  text-align: center; /* Center content within the card */
}

.slot-card {
  border: 1px solid #ddd; /* A subtle border */
  border-radius: 5px; /* Slightly rounded corners */
  padding: 15px; 
  position: relative; /* For positioning the overlay */
}

.slot-card.new {
  /* Styles to highlight new slots (optional) */
  background-color: #f0f8ff; /* Light background color */
}

.slot-card img {
  max-width: 100%; /* Image fits within the card  */
  height: auto;   /* Maintain aspect ratio */
  border-radius: 5px; /* Match card's rounded corners */
}

.slot-card__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent overlay */
  opacity: 0;  /* Hidden by default */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: opacity 0.2s ease-in-out; /* Smooth fade effect */
}

.slot-card:hover .slot-card__overlay {
  opacity: 1; /* Show overlay on hover */
}

.slot-card__link,
.btn {
  display: inline-block;
  padding: 8px 15px;
  text-decoration: none;
  margin-bottom: 5px;
}

.slot-card__link {
  background-color: #3498db; /* Example link color */
  color: white;
  border-radius: 3px;
}

.btn {
  background-color: #2ecc71; /* Example button color */
  color: white;
  border-radius: 3px;
}

.short-name {
  display: block;
  font-weight: bold;
  margin-top:5px;
}