.banner container {
width: 750px;
}

#site-title {
position:relative
}

#search-container.with-advanced {
position:relative
}

#primary-nav a {
font-size:16px;
font-weight:700
}

#primary-nav li.active a {
color:#602c8a
}

#primary-nav a:link {
color:#602c8a
}

#primary-nav a:visited {
color:#602c8a
}

#primary-nav a:hover {
color:#333
}

#primary-nav a:active {
color:#602c8a
}

#exhibit-pages a {
font-size:16px
}

p {
font-size:16px
}

ul {
font-size:16px
}

ol {
font-size:16px
}

a:link {
color:#602c8a
}

a:visited {
color:#602c8a
}

a:hover {
color:#333
}

a:active {
color:#602c8a
}

h1 {
color:#602c8a
}

h2 {
color:#602c8a
}

h3 {
color:#602c8a
}

h4 {
color:#333
}

h5 {
color:#333
}

h6 {
color:#333
}

/* ============================================================
   GLOBAL RESETS (for media embed blocks using .custom-media)
   ============================================================ */

.custom-media .file,
.custom-media .file .item.resource,
.custom-media .file.left .item.resource,
.custom-media .file.right .item.resource,
.custom-media .file.center {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

 
.custom-media .media-embed.media-display-thumbnail {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem !important;
    align-items: start;
}

 
.custom-media .media-embed.media-display-thumbnail .item.resource {
    padding: 0;
    margin: 0 !important;
    box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.25);
    background: #fff; /* optional but recommended for cards */
    display: flex;
    flex-direction: column;
}

/* =======================================
   RESPONSIVE THUMBNAILS
   ======================================= */

 
.custom-media .media-embed.media-display-thumbnail .item.resource img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important; /* Pick 4:3 or 3:2 */
    object-fit: cover !important;
    display: block;
    max-height: none !important;
}

 
.custom-media .media-embed.media-display-thumbnail .item.resource h3,
.custom-media .media-embed.media-display-thumbnail .item.resource .caption {
    margin: 1rem;
}

.custom-media .media-embed.media-display-thumbnail {
    justify-content: start;
    grid-template-columns: repeat(auto-fill, minmax(260px, 320px));
}

.two-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

/* Stack vertically on smaller screens */
@media (max-width: 768px) {
  .two-columns {
    grid-template-columns: 1fr;
  }
}

/* =============================================
   Omeka S Grid — Responsive fix for Freedom theme
   Targets only small screens, leaves desktop untouched
   ============================================= */

@media (max-width: 768px) {

  /* The outer grid container */
  .blocks-inner.page-layout-grid {
    display: grid;
    grid-template-columns: 1fr !important;
  }

  /* All blocks and block groups: go full width */
  .blocks-inner.page-layout-grid > .block,
  .block-group-grid > .block {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }

  /* Nested block groups also collapse to single column */
  .block-group-grid {
    display: grid;
    grid-template-columns: 1fr !important;
  }

  /* Prevent iframes (PDFs) from overflowing */
  .block-media iframe {
    width: 100% !important;
    height: 400px !important;
  }

  /* Ensure images are fluid */
  .block-media img {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* =============================================
   Optional: tablet (769px–1024px)
   Collapse narrow spans but keep wider ones
   ============================================= */

@media (min-width: 769px) and (max-width: 1024px) {

  /* Blocks spanning 3 or fewer columns get bumped up */
  .grid-span-3,
  .grid-span-2,
  .grid-span-1 {
    grid-column: span 4 !important;
  }

  /* Blocks spanning 4–8 columns go half width */
  .grid-span-4,
  .grid-span-5,
  .grid-span-6,
  .grid-span-7,
  .grid-span-8 {
    grid-column: span 6 !important;
  }

  /* 9+ columns stay full width */
  .grid-span-9,
  .grid-span-10,
  .grid-span-11,
  .grid-span-12 {
    grid-column: span 12 !important;
  }
}