body, h2, p, span, a, button {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Nunito Sans", sans-serif;
}

/* Banner Background */
.banner-background {
  background: linear-gradient(21.17deg, rgba(0, 51, 97, 1) 17.11%, rgba(231, 56, 18, 0) 60.2%), 
              url("https://ulb-exhibition.uibk.ac.at/files/asset/e221c8d1f12c02631e90d2ba07c26938211e3648.jpg") center;
  background-size: cover;
}

/* Button Styling */
#teaser-image button {
  background: black;
  color: white; /* Ensure text is visible */
  border: none; /* Remove default border */
  padding: 0.5rem 1rem; /* Add padding for better appearance */
  cursor: pointer; /* Change cursor to pointer */
  transition: background 0.3s ease; /* Smooth hover effect */
}

#teaser-image button:hover {
  background: #333; /* Slightly lighter black on hover */
}

/* Custom Button with Icon */
.custom-button::after {
  font-family: "Font Awesome 6 Free"; /* Ensure the correct Font Awesome font is used */
  font-weight: 900; /* Use the appropriate weight (900 for solid icons) */
  content: "\f35d"; /* Unicode for the 'up-right-from-square' icon */
  display: inline-block;
  margin-left: 10px; /* Space between text and icon */
  font-size: 15px; /* Adjust size to match the button text */
  vertical-align: middle; /* Align icon with text */
}

/* Text Container */
.text-container span {
  color: white;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.2;
}

/* Site Summary */
.site-summary {
  margin-top: 2.2rem;
  margin-bottom: 0.2rem;
  font-size: 1rem;
  line-height: 1.4;
  color: white;
}

 .custom-button {
  background-color: white;
  color: black;
  border: 2px double grey;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 15px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.custom-button:hover {
  background-color: black;
  color: white;
}

/* ----------------------------------------
   Alle Ausstellungen – responsive layout
   ---------------------------------------- */

.alle-ausstellungen,
.text-container span, 
.site-summary { {
  display: grid;
  /* Smaller, flexible cards; auto-fit wraps nicely on any width */
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  align-items: start;
  justify-items: center; /* center cards within cells */
}

/* Card base: make it a bit smaller without changing appearance */
.site-thumbnail.site-custom {
  text-align: center;
  padding: 8px;
  margin: 0;            /* grid handles spacing */
  max-width: 240px;     /* slightly smaller than common defaults */
  width: 100%;          /* fill the grid cell up to max-width */
}

@media (min-width: 993px) {
  .site-thumbnail.site-custom {
    max-width: 200px;
    padding: 6px;
  }

/* Ensure the whole card is a consistent tap target */
.site-thumbnail.site-custom a {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Image: preserve existing look; just ensure consistent sizing */
.site-thumbnail.site-custom img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;  /* uniform thumbs; remove if you prefer native ratio */
  object-fit: cover;
  /* Keep your existing radius/shadow if any; not forcing styles here */
}

/* Title: slightly tighter, still bold and readable */
.site-thumbnail.site-custom .site-title,
.site-thumbnail.site-custom h3,
.site-thumbnail.site-custom .title {
  margin-top: 6px;
  font-weight: 700;
  line-height: 1.25;
  /* Subtly smaller while remaining legible across sizes */
  font-size: clamp(0.95rem, 1.8vw, 1.05rem);
  color: inherit;
}

/* Optional: subtitle/excerpt inside cards, if present */
.site-thumbnail.site-custom .excerpt,
.site-thumbnail.site-custom p {
  margin-top: 4px;
  font-size: clamp(0.85rem, 1.6vw, 0.95rem);
  line-height: 1.35;
}

/* Tablet and down: refine grid and spacing */
@media (max-width: 992px) {
 .alle-ausstellungen,
.text-container span, 
.site-summary {
    gap: 12px;
  }

  .site-thumbnail.site-custom {
    max-width: 220px; /* nudge a bit smaller on tablets */
    padding: 6px;
  }
}

/* Phones: two columns where possible */
@media (max-width: 800px) {
 .alle-ausstellungen,
.text-container span, 
.site-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .site-thumbnail.site-custom {
    max-width: 200px; /* keep cards compact on mobile */
    padding: 6px;
  }

  .site-thumbnail.site-custom img {
    aspect-ratio: 1 / 1;
  }
}

/* Very narrow phones: single column for comfort */
@media (max-width: 360px) {
  .alle-ausstellungen,
  .text-container span, 
  .site-summary {
    grid-template-columns: 1fr;
  }

  .site-thumbnail.site-custom {
    max-width: 320px; /* let single-column breathe a bit */
  }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .site-thumbnail.site-custom,
  .site-thumbnail.site-custom * {
    transition: none !important;
  }
}
}