/* Base Layout: Mobile First (Single Column Stack) */
div.container-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px; /* Provides consistent spacing between items */
}

.container div.page-grid { 
  text-align: center;
}

div.ccm-block-page-list-page-entry-grid-thumbnail-hover {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

div.ccm-block-page-list-page-entry-grid-thumbnail a {
    position: relative;
    display: block; /* Switched to block for cleaner grid alignment */
    margin: auto;
    max-width: 280px; /* Controls extreme blown-out scaling on small viewports */
}

div.ccm-block-page-list-page-entry-grid-thumbnail a img {
    width: 100%;
    height: auto;
    display: block;
    /* Removed rigid min-width to let images scale down naturally on tiny screens */
}

div.ccm-block-page-list-page-entry-grid-thumbnail-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 2;
}

div.ccm-block-page-list-page-entry-grid-thumbnail a:hover div.ccm-block-page-list-page-entry-grid-thumbnail-hover {
    opacity: 1;
}

div.ccm-block-page-list-page-entry-grid-thumbnail-title-wrapper {
    display: table;
    width: 100%;
    height: 100%;
}

div.ccm-block-page-list-page-entry-grid-thumbnail-title {
    display: table-cell;
    width: 100%;
    text-align: center;
    height: 100%;
    vertical-align: middle;
    color: #fff;	
}

div.ccm-block-page-list-page-entry-grid-thumbnail-title i {
    display: none;
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */

/* Tablets and Medium Screens (2 Columns Side-by-Side) */
@media (min-width: 576px) {
    div.container-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktops and Large Form Factors (All 4 Columns on the Same Row) */
@media (min-width: 992px) {
    div.container-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    div.ccm-block-page-list-page-entry-grid-thumbnail a {
        max-width: 100%; /* Restores full grid capacity on desktop row layouts */
    }
}