/* This is gallery styles  */

.sl-glry-container {
  display: flex;
  gap: 15px;
  /* Spacing between the large card and the side column */
  max-width: 1270px;
  /* Optional: Sets a max width for the whole section */
  margin: 0px auto;
  /* Optional: Centers the container */
  margin-top: 20px;
}

/* --- Card Base Styles --- */
.sl-glry-card {
  position: relative;
  overflow: hidden;
  /* Ensures the image and text are within the card's bounds */
  background-color: #f0f0f0;
  cursor: pointer;
  /* border-radius: 4px; */
  /* Slight rounding on corners */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  /* Subtle shadow for depth */
}

.sl-glry-image-area {
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: transform 0.3s ease;
  /* Transition for hover effect */
}

.sl-glry-card:hover .sl-glry-image-area {
  transform: scale(1.03);
  /* Subtle zoom on hover */
}

/* --- Text Overlay Styles --- */
.sl-glry-text-content {
  position: absolute;
  width: 100%;
  padding: 20px;
  color: white;
  box-sizing: border-box;
  /* Gradient for better text readability on images */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
}

.sl-glry-text-content-bottom {
  bottom: 0;
}

.sl-glry-text-content-top {
  top: 0;
  /* Reversing the gradient for the top-placed text (like the Resilience card) */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
}

.sl-glry-category {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  margin-bottom: 5px;
}

.sl-glry-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
}

/* --- Layout Specific Styles --- */

/* Large Card */
.sl-glry-card-large {
  flex: 2;
  /* Takes up a larger proportion of the space */
  min-height: 450px;
  /* Set a fixed height for the large card */
  max-height: 450px;
}

/* Side Column Container */
.sl-glry-side-column {
  flex: 1;
  /* Takes up a smaller proportion of the space */
  display: flex;
  flex-direction: column;
  gap: 15px;
  /* Spacing between the small cards */
}

/* Small Cards (1 and 2 in the side column) */
.sl-glry-card-small:first-child {
  flex: 1;
  /* First card takes up space (Resilience card) */
  min-height: 200px;
}

/* The two small cards at the bottom right (half height) */
.sl-glry-card-half {
  flex: 1;
  /* They will split the remaining space equally */
  min-height: 100px;
  /* Minimum height for visual stability */
}