/* ==========================================================================
   Case Studies - clean grid, modeled on the Videos page's .thumb-wrap
   pattern. No dependency on .prod_item_box, table-cell layout, or any
   of the legacy rules that collided with the previous approach.
   ========================================================================== */

.cs-item-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 24px;
    row-gap: 56px;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
}

.cs-item-wrap {
    display: block;
}

.cs-item-wrap a {
    display: block;
    color: #58585b;
    text-decoration: none;
}

.cs-thumb-frame {
    position: relative;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    overflow: hidden;
}

/* padding-top: 100% establishes a real, self-sufficient height for the
   frame (a square, matching the crop=1:1 the CDN images are requested
   at), through normal content flow via the ::before pseudo-element.
   All three real images are position: absolute on top of that. */
.cs-thumb-frame::before {
    content: "";
    display: block;
    padding-top: 100%;
}

.cs-thumb-base,
.cs-thumb-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cs-thumb-overlay {
    pointer-events: none;
}

.cs-thumb-overlay-off {
    opacity: 1;
}

.cs-thumb-overlay-on {
    opacity: 0;
}

/* Space above the label (between the thumbnail and the text) and
   between rows (row-gap, above) approximate the spacing from the
   prior version, but as intentional properties of the grid and the
   label itself, rather than borrowed from an unrelated empty
   element's margin the way the old version did it. Because grid
   auto-sizes each row to its tallest item, a 1-line label next to a
   3-line label in the same row still lines up without staggering;
   the shorter one just gets consistent whitespace below it before
   row-gap adds the space to the next row. */
.cs-item-label {
    margin-top: 24px;
    text-align: center;
    font-size: 24px;
    line-height: normal;
}