/* ============================================
   victormtz.me — Desktop & Mobile Layout Fix
   Tony @ 2026-03-21 v4
   
   The Fluid Engine grid uses 43 rows with
   grid-template-rows: repeat(43, minmax(calc, auto))
   where the calc resolves to ~20px per row at 1920.
   
   Each block spans multiple rows via grid-area.
   Images are position:absolute in zero-height
   containers. Without Squarespace JS, containers
   have no height, so rows collapse to minimum.
   
   Fix: Set explicit row heights that match the
   original Squarespace design proportions.
   We calculate: at 1500px max-width, the row
   height factor is 0.0215, so each row ≈ 32px.
   At 1920 viewport, container ≈ 1766px, row ≈ 38px.
   
   But the real fix is to give image containers
   height:100% so they fill the grid cell, and
   keep images absolute with object-fit.
   ============================================ */

:root {
  --sqs-site-gutter: 4vw;
  --sqs-site-max-width: 1500px;
  --sqs-mobile-site-gutter: 6vw;
}

html, body {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

/* =============================================
   DESKTOP LAYOUT FIXES (768px+)
   ============================================= */
@media (min-width: 768px) {

  /* --- 1. Page section: kill flex shrink-wrap --- */
  .page-section {
    display: block !important;
    width: 100% !important;
  }

  .page-section .content-wrapper {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  .page-section .content-wrapper > .content {
    width: 100% !important;
    max-width: 100% !important;
  }

  .page-section .content > div {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* --- 2. Fluid engine grid --- */
  .fluid-engine {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* --- 2b. After JS moves all fe-blocks into .fluid-engine,
     it becomes the single grid container. Force explicit
     row heights since Squarespace JS isn't setting them.
     
     The inline CSS defines the grid but rows collapse without
     content height. We set fixed row heights to match the
     original Squarespace design proportions.
     
     At 1920px viewport: container ~1766px, row factor 0.0215
     → base row = 38px. But this is minimum; we use fixed.
  */
  .fe-630e49bcd1e2f50eec573c61 {
    grid-template-rows: repeat(43, minmax(38px, 38px)) !important;
  }

  /* --- 3. FORCE GRID ROW HEIGHTS ---
     The grid has 43 rows. Original Squarespace uses
     minmax(calc(container * 0.0215), auto).
     At 1920px viewport with 4vw gutter (77px each side),
     container ≈ 1766px, so base row ≈ 38px.
     
     We override with fixed minmax using a larger
     minimum so rows don't collapse.
     
     But actually the key is: we need the grid cells
     to have intrinsic content height. The easiest way
     is to make the fe-block and its children fill the
     cell, then size images via object-fit.
  */

  /* Each .fe-block fills its grid cell */
  .fe-block {
    position: relative;
    overflow: hidden;
  }

  /* All intermediate containers fill 100% */
  .fe-block > .sqs-block,
  .fe-block > .sqs-block > .sqs-block-content,
  .fe-block .fluid-image-component-root,
  .fe-block .fluid-image-animation-wrapper,
  .fe-block .fluid-image-container {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
  }

  /* Image links/wrappers fill container */
  .fe-block .fluid-image-container a.sqs-block-image-link,
  .fe-block .fluid-image-container .js-content-mode-element {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
  }

  /* Images fill with object-fit */
  .fe-block .fluid-image-container img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }

  /* Content-fill (stretched) → cover */
  .fe-block .content-fill img,
  .fe-block [data-is-image-stretched="true"] img {
    object-fit: cover !important;
  }

  /* Content-fit → contain */
  .fe-block .content-fit img,
  .fe-block .image-component-container-fit img {
    object-fit: contain !important;
  }

  /* --- 4. EXPLICIT ROW HEIGHTS ---
     The grid has 43 rows at desktop. The inline style
     uses: repeat(43, minmax(calc(container * 0.0215), auto))
     
     At container ~1766px: min row = 38px. But with auto,
     rows only grow if content forces them.
     
     Since all images are position:absolute (no intrinsic height),
     rows will stay at minimum ~38px. The grid-area spans
     define how many rows each block uses, so the actual
     block height = rows_spanned * 38px + gaps.
     
     For the reference design, the grid area assignments are:
     - Featured header: rows 1-2 (2 rows, ~87px) 
     - Company logos: rows 2-3 (1 row ≈ 49px)
     - Software icons: rows 3-4 (1 row ≈ 49px)
     - Thumbnails: rows 4-10 (6 rows ≈ 293px)
     - "Reels" header: rows 10-12 (2 rows ≈ 87px)
     - Reel videos: rows 12-19 (7 rows ≈ 342px)
     - Big video/content: rows 20-35 (15 rows ≈ 731px)
     
     But at 38px/row, those thumbnails at 6 rows = 228+55gaps ≈ 283px.
     That's reasonable for a thumbnail area.
     
     The issue is the browser defaults to ~20px/row instead of 38px.
     Let me force a larger minimum.
  */

  /* Row heights now set on parent [data-fluid-engine] */

  /* --- 5. VIDEO FIX --- */
  .fe-block .sqs-block-video {
    width: 100% !important;
    height: 100% !important;
  }

  .fe-block .sqs-block-video .sqs-block-content,
  .fe-block .sqs-block-video .intrinsic {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
  }

  .fe-block .sqs-block-video .embed-block-wrapper {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    padding-bottom: 0 !important;
  }

  .fe-block .sqs-block-video video {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: #000 !important;
  }

  /* --- 6. TEXT blocks --- */
  .fe-block .sqs-block-html .sqs-block-content {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
  }

  /* --- 7. CODE blocks (game) --- */
  .fe-block .sqs-block-code {
    width: 100% !important;
    height: 100% !important;
  }

  .fe-block .sqs-block-code .sqs-block-content,
  .fe-block .sqs-block-code .sqs-code-container {
    width: 100% !important;
    height: 100% !important;
  }

  .fe-block .sqs-block-code iframe {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
  }

  /* --- 8. Reduce gap before footer --- */
  main#page {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  .page-section.layout-engine-section {
    padding-bottom: 20px !important;
  }

  footer#footer-sections,
  footer.sections {
    margin-top: 0 !important;
    padding-top: 20px !important;
  }

  /* --- 9. Hide image overlays --- */
  .fluidImageOverlay {
    pointer-events: none;
  }
}

/* === FOOTER FIXES (all sizes) === */
footer .page-section,
footer.sections {
  display: block !important;
  width: 100% !important;
}

footer .content-wrapper {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}

footer .content {
  width: 100% !important;
  max-width: 100% !important;
}

footer .content > div {
  width: 100% !important;
}

/* =============================================
   MOBILE LAYOUT (767px and below)
   ============================================= */
@media (max-width: 767px) {

  :root {
    --sqs-mobile-site-gutter: 5vw;
    --sqs-site-gutter: 5vw;
    --sqs-site-max-width: 100vw;
    --mobile-pad: 16px;
    --card-bg: rgba(255,255,255,0.05);
    --card-border: rgba(255,255,255,0.1);
    --accent: #00d4ff;
  }

  html, body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    background: #0a0a0a !important;
    color: #fff !important;
  }

  .section-background, .section-border, .header-menu-bg, .theme-bg--primary {
    background-color: #0a0a0a !important;
    background: #0a0a0a !important;
  }

  .fluidImageOverlay { background: transparent !important; opacity: 0 !important; }

  .page-section {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    background: #0a0a0a !important;
  }

  .page-section .content-wrapper {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  .page-section .content-wrapper > .content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  .page-section .content > div { width: 100% !important; max-width: 100% !important; }

  .fluid-engine {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 var(--mobile-pad) !important;
    box-sizing: border-box !important;
  }

  .fe-block {
    grid-area: unset !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .mobile-group { width: 100% !important; box-sizing: border-box !important; }
  .mobile-section-header { padding: 32px 0 12px 0; }
  .mobile-section-header .sqs-html-content p {
    font-size: 28px !important; font-weight: 700 !important; color: #fff !important;
    margin: 0 !important; padding-bottom: 8px !important;
    border-bottom: 2px solid var(--accent) !important; display: inline-block !important;
  }

  .mobile-project-card {
    background: var(--card-bg) !important; border: 1px solid var(--card-border) !important;
    border-radius: 12px !important; padding: 16px !important; margin: 12px 0 !important;
    display: flex !important; flex-direction: column !important;
  }

  .mobile-project-card > .fe-block:first-child .sqs-block-image img {
    max-height: 50px !important; width: auto !important; object-fit: contain !important;
  }

  .mobile-project-card .mobile-icon img {
    height: 28px !important; width: 28px !important; object-fit: contain !important;
    display: inline-block !important; vertical-align: middle !important; margin: 2px 4px !important;
  }

  .mobile-project-card video {
    width: 100% !important; height: auto !important; aspect-ratio: 16/9 !important;
    border-radius: 8px !important; margin-top: 12px !important; background: #000 !important;
  }

  .mobile-reel { margin: 8px 0 !important; width: 100% !important; }
  .mobile-reel .sqs-html-content p {
    font-size: 18px !important; font-weight: 600 !important; color: #fff !important;
    margin: 16px 0 4px 0 !important;
  }
  .mobile-reel video {
    width: 100% !important; height: auto !important; aspect-ratio: 16/9 !important;
    border-radius: 8px !important; background: #000 !important;
  }

  .mobile-game {
    margin: 24px 0 !important; padding: 16px !important;
    background: var(--card-bg) !important; border: 1px solid var(--card-border) !important;
    border-radius: 12px !important;
  }
  .mobile-game iframe {
    width: 100% !important; max-width: 100% !important; min-height: 400px !important;
    border-radius: 8px !important;
  }

  .fluid-image-component-root, .image-block-outer-wrapper {
    height: auto !important; width: 100% !important;
  }
  .fluid-image-animation-wrapper { height: auto !important; width: 100% !important; }
  .fluid-image-container {
    overflow: visible !important; position: relative !important;
    height: auto !important; width: 100% !important;
  }
  .fluid-image-container img {
    position: static !important; width: 100% !important; height: auto !important;
    max-width: 100% !important; display: block !important;
  }
  .js-content-mode-element, .content-fit, .content-fill {
    height: auto !important; position: static !important; width: 100% !important;
  }
  a.sqs-block-image-link { display: block !important; height: auto !important; }
  .fluidImageOverlay { display: none !important; }

  .mobile-icon-row {
    display: flex !important; flex-wrap: wrap !important; gap: 6px !important;
    align-items: center !important; padding: 8px 0 !important;
  }
  .mobile-icon-row .fe-block {
    width: auto !important; max-width: none !important; flex: 0 0 auto !important;
  }
  .mobile-icon-row .fe-block .fluid-image-container,
  .mobile-icon-row .fe-block .fluid-image-component-root,
  .mobile-icon-row .fe-block .fluid-image-animation-wrapper,
  .mobile-icon-row .fe-block .sqs-block-content,
  .mobile-icon-row .fe-block .sqs-block {
    width: auto !important; display: inline-block !important;
  }
  .mobile-icon-row .fe-block img {
    width: 32px !important; height: 32px !important; object-fit: contain !important;
    position: static !important; display: inline-block !important;
  }

  video { width: 100% !important; max-width: 100% !important; height: auto !important; }
  .sqs-block-video .embed-block-wrapper {
    position: relative !important; width: 100% !important;
    padding-bottom: 56.25% !important; height: 0 !important;
  }
  .sqs-block-video .embed-block-wrapper video {
    position: absolute !important; top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
  }

  h1 { font-size: clamp(1.5rem, 6vw, 2.5rem) !important; color: #fff !important; }
  h2 { font-size: clamp(1.2rem, 5vw, 2rem) !important; color: #fff !important; }
  h3 { font-size: clamp(1rem, 4vw, 1.5rem) !important; color: #fff !important; }
  .sqs-html-content { color: rgba(255,255,255,0.85) !important; }

  #header {
    position: sticky !important; top: 0 !important; z-index: 9999 !important;
    background: #0a0a0a !important;
  }

  #footer-sections .sqs-layout .row { display: flex !important; flex-direction: column !important; }
  #footer-sections .sqs-col-3, #footer-sections .sqs-col-9 {
    width: 100% !important; float: none !important;
  }
  footer .sqs-html-content p { color: rgba(255,255,255,0.6) !important; font-size: 13px !important; }
  footer a { color: var(--accent) !important; }

  img[src*=".gif"] { width: 100% !important; height: auto !important; border-radius: 8px !important; }
  ::-webkit-scrollbar { width: 4px; }
  ::-webkit-scrollbar-track { background: #0a0a0a; }
  ::-webkit-scrollbar-thumb { background: #333; border-radius: 2px; }
  * { max-width: 100vw; }
}


/* === FOOTER FIX === */
#footer-sections .sqs-layout {
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
}

#footer-sections .row {
  display: flex !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  max-width: 100% !important;
}

#footer-sections .sqs-col-3 {
  flex: 0 0 25% !important;
  max-width: 25% !important;
  float: none !important;
}

#footer-sections .sqs-col-9 {
  flex: 0 0 75% !important;
  max-width: 75% !important;
  float: none !important;
}

#footer-sections .sqs-col-9 .row {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-end !important;
}

#footer-sections .sqs-col-9 .sqs-col-3 {
  flex: 0 0 33.333% !important;
  max-width: 33.333% !important;
}

/* Ensure button containers don't overflow */
.sqs-block-button-container {
  overflow: visible !important;
}

.sqs-block-button-element {
  white-space: nowrap !important;
}


/* === FIX: Platformer game iframe constrained to grid cell === */
.sqs-block-code {
  max-width: 100% !important;
  overflow: hidden !important;
}

.sqs-block-code .sqs-code-container {
  max-width: 100% !important;
  overflow: hidden !important;
}

.sqs-block-code iframe {
  max-width: 100% !important;
  max-height: 100% !important;
}

/* Constrain the game wrapper div */
.sqs-block-code > div > div {
  max-width: 100% !important;
  overflow: hidden !important;
}

/* === FIX: GIF thumbnails - all same height with cover fit === */
/* Stretched images (GIF thumbnails in the mosaic) fill their cell */
[data-is-image-stretched="true"] .fluid-image-container {
  height: 100% !important;
  overflow: hidden !important;
}

[data-is-image-stretched="true"] img {
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
}



/* === FIX: Footer - prevent right-side clipping === */
#footer-sections {
  overflow: visible !important;
}

#footer-sections .content-wrapper {
  padding: 0 4vw !important;
  box-sizing: border-box !important;
}

#footer-sections .sqs-layout.sqs-grid-12 {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Make footer row use flexbox properly */
#footer-sections > section .row.sqs-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
}

#footer-sections .span-3 {
  flex: 0 0 25% !important;
  width: 25% !important;
  float: none !important;
}

#footer-sections .span-9 {
  flex: 0 0 75% !important;
  width: 75% !important;
  float: none !important;
}

#footer-sections .span-9 > .row {
  display: flex !important;
  justify-content: flex-end !important;
}

#footer-sections .span-9 .span-3 {
  flex: 0 0 33% !important;
  width: 33% !important;
}

/* All grid images use cover */


/* === Platformer game sizing fix === */
.sqs-block-code .sqs-code-container > div {
  max-width: 100% !important;
  overflow: hidden !important;
}

.sqs-block-code .sqs-code-container > div > div {
  max-width: 100% !important;
  display: flex !important;
  justify-content: center !important;
}

.sqs-block-code iframe,
.sqs-block-code .sqs-code-container iframe {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1024/576 !important;
}


/* === IMAGE OBJECT-FIT RULES === */




/* BUT override: if the image is in a multi-column block (thumbnail), use cover */
/* Blocks spanning 3+ columns are thumbnails, not icons */

/* === GAME IFRAME SIZING === */
/* The platformer game iframe needs to be constrained */
.fe-block .sqs-block-code {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

.fe-block .sqs-block-code .sqs-block-content {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.fe-block .sqs-block-code .sqs-code-container {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  max-height: 100% !important;
}

/* The div wrapper inside code container */
.sqs-code-container > div {
  flex: 1 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  overflow: hidden !important;
  max-height: 400px !important;
}

.sqs-code-container iframe {
  max-width: 100% !important;
  max-height: 100% !important;
  width: 100% !important;
  border: none !important;
}

/* Controls text below the game */
.sqs-code-container + p,
.sqs-code-container ~ p {
  text-align: center !important;
  margin-top: 8px !important;
}


/* === FIX: Image containers - transparent by default === */
.fe-block .fluid-image-container {
  background: transparent !important;
}


/* === THUMBNAIL IMAGES: object-fit cover (multi-row blocks only) === */
.fe-block-yui_3_17_2_1_1771709808047_4929 img { object-fit: cover !important; }
.fe-block-yui_3_17_2_1_1771709808047_9058 img { object-fit: cover !important; }
.fe-block-yui_3_17_2_1_1771709808047_8090 img { object-fit: cover !important; }
.fe-block-yui_3_17_2_1_1771709808047_7083 img { object-fit: cover !important; }
.fe-block-yui_3_17_2_1_1771681749668_3457 img { object-fit: cover !important; }
.fe-block-yui_3_17_2_1_1771681749668_3457 img { object-fit: cover !important; }
.fe-block-yui_3_17_2_1_1771709808047_10984 img { object-fit: cover !important; }
.fe-block-yui_3_17_2_1_1771720316734_8862 img { object-fit: cover !important; }
.fe-block-c3bf8fa9f1616f4cc31b img { object-fit: cover !important; }
.fe-block-yui_3_17_2_1_1771709808047_18030 img { object-fit: cover !important; }
.fe-block-yui_3_17_2_1_1771681749668_6993 img { object-fit: cover !important; }
.fe-block-yui_3_17_2_1_1771681749668_6993 img { object-fit: cover !important; }
.fe-block-yui_3_17_2_1_1733760683850_3361 img { object-fit: cover !important; }
.fe-block-yui_3_17_2_1_1733760683850_3361 img { object-fit: cover !important; }
.fe-block-yui_3_17_2_1_1661880617147_3908 img { object-fit: cover !important; }
.fe-block-yui_3_17_2_1_1661880617147_3908 img { object-fit: cover !important; }
.fe-block-yui_3_17_2_1_1771709808047_11950 img { object-fit: cover !important; }
.fe-block-yui_3_17_2_1_1771681749668_14072 img { object-fit: cover !important; }
.fe-block-yui_3_17_2_1_1771681749668_14072 img { object-fit: cover !important; }
.fe-block-3fc4bf81bea0ae724a6a img { object-fit: cover !important; }
.fe-block-3500f9d31bc3b659966a img { object-fit: cover !important; }
.fe-block-yui_3_17_2_1_1771681749668_18763 img { object-fit: cover !important; }
.fe-block-yui_3_17_2_1_1771681749668_18763 img { object-fit: cover !important; }
.fe-block-dcae556da8be036c8986 img { object-fit: cover !important; }
.fe-block-a6ef167fd01533b5050a img { object-fit: cover !important; }
.fe-block-yui_3_17_2_1_1661880617147_6401 img { object-fit: cover !important; }
.fe-block-yui_3_17_2_1_1661880617147_6401 img { object-fit: cover !important; }
.fe-block-yui_3_17_2_1_1772538575753_21954 img { object-fit: cover !important; }
.fe-block-yui_3_17_2_1_1771709808047_22916 img { object-fit: cover !important; }
.fe-block-yui_3_17_2_1_1771682943929_4859 img { object-fit: cover !important; }
.fe-block-yui_3_17_2_1_1771682943929_4859 img { object-fit: cover !important; }
.fe-block-yui_3_17_2_1_1771709808047_27816 img { object-fit: cover !important; }
.fe-block-yui_3_17_2_1_1771702627290_4797 img { object-fit: cover !important; }
.fe-block-yui_3_17_2_1_1771702627290_4797 img { object-fit: cover !important; }
.fe-block-yui_3_17_2_1_1771720316734_16348 img { object-fit: cover !important; }
.fe-block-yui_3_17_2_1_1771720316734_18406 img { object-fit: cover !important; }
.fe-block-yui_3_17_2_1_1661880617147_8783 img { object-fit: cover !important; }
.fe-block-yui_3_17_2_1_1661880617147_8783 img { object-fit: cover !important; }
.fe-block-yui_3_17_2_1_1772538575753_10031 img { object-fit: cover !important; }
.fe-block-yui_3_17_2_1_1772538575753_10031 img { object-fit: cover !important; }
.fe-block-8b4c5e74c2e6b95180f7 img { object-fit: cover !important; }
.fe-block-yui_3_17_2_1_1772538575753_23832 img { object-fit: cover !important; }
.fe-block-4af51f17f55679254a5a img { object-fit: cover !important; }
.fe-block-yui_3_17_2_1_1771720316734_12900 img { object-fit: cover !important; }
.fe-block-4ace892212f68831dc82 img { object-fit: cover !important; }
.fe-block-33d06917b310c9739415 img { object-fit: cover !important; }
.fe-block-yui_3_17_2_1_1772538575753_25436 img { object-fit: cover !important; }
.fe-block-yui_3_17_2_1_1771709808047_25455 img { object-fit: cover !important; }
.fe-block-yui_3_17_2_1_1772477528178_10012 img { object-fit: cover !important; }
.fe-block-25cd72d9db412fa4d79e img { object-fit: cover !important; }
.fe-block-6ae2d5a86650ef07c79a img { object-fit: cover !important; }
.fe-block-yui_3_17_2_1_1771709808047_30165 img { object-fit: cover !important; }
.fe-block-2558fcfbabb352eddd55 img { object-fit: cover !important; }
.fe-block-85ff5ad04b4652f50b14 img { object-fit: cover !important; }
.fe-block-a5682af4d3a45b8ac8d7 img { object-fit: cover !important; }
.fe-block-8b5d54960dc920d091bb img { object-fit: cover !important; }
.fe-block-yui_3_17_2_1_1771720316734_7189 img { object-fit: cover !important; }
.fe-block-94d894222b86fbf8439f img { object-fit: cover !important; }
.fe-block-6c0dc4bc1d8b4d474473 img { object-fit: cover !important; }
.fe-block-2cee9766c59c003560c4 img { object-fit: cover !important; }
.fe-block-a62704ff860965a9ebd2 img { object-fit: cover !important; }
.fe-block-yui_3_17_2_1_1772645035406_13588 img { object-fit: cover !important; }
.fe-block-yui_3_17_2_1_1772645035406_13588 img { object-fit: cover !important; }

/* All other images keep contain (logos, icons) */


/* === ICON vs THUMBNAIL object-fit ===
   Icons: 1-row blocks (row span = 1), small software logos -> contain
   Thumbnails: multi-row blocks (row span 3+), portfolio images -> cover
   
   Since CSS can't query grid-area spans, we use a different approach:
   ALL .fe-block images default to COVER, then we override specific
   icon-sized image wrapper classes back to CONTAIN */

/* Default: all grid images fill their cell */
.fe-block .fluid-image-container img,
.fe-block .sqs-image-content img {
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
}

/* Icons use contain-fit class from Squarespace */
.image-component-container-fit .fluid-image-container img {
  object-fit: contain !important;
}

/* BUT: override contain-fit for the 6 thumbnail blocks specifically */
.fe-block-yui_3_17_2_1_1771681749668_3457 img,
.fe-block-yui_3_17_2_1_1771681749668_6993 img,
.fe-block-yui_3_17_2_1_1771681749668_14072 img,
.fe-block-yui_3_17_2_1_1771681749668_18763 img,
.fe-block-yui_3_17_2_1_1771682943929_4859 img,
.fe-block-yui_3_17_2_1_1771702627290_4797 img {
  object-fit: cover !important;
}




/* === DDB thumbnail: yellow bg + cover to match neighbor heights === */
.fe-block-yui_3_17_2_1_1771681749668_6993 .fluid-image-container {
  background-color: #F5D547 !important;
}

.fe-block-yui_3_17_2_1_1771681749668_6993 img {
  object-fit: cover !important;
  object-position: center bottom !important;
}