.image-grid-section{
    padding: 24px 0;
  }

  .image-grid{
    width: min(1200px, 92%);
    margin: 0 auto;

    display: grid;
    gap:28px;

    /* Desktop layout: 3 columns, 2 rows */
    grid-template-columns: 300px;
    grid-template-rows: 3O0px ;
    grid-template-areas:
      "a a b c"
  }

  .tile{
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 14px;
    overflow: hidden;
    background: #f2f4f7;
    box-shadow: 0 10px 28px rgba(0,0,0,.08);
    transition: transform .25s ease, box-shadow .25s ease;
  }

  .tile img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.02);
    transition: transform .35s ease;
  }

  .tile:hover{
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(0,0,0,.12);
  }
  .tile:hover img{
    transform: scale(1.07);
  }

  /* Assign areas */
  .tile--a{ grid-area: a; }
  .tile--b{ grid-area: b; }
  .tile--c{ grid-area: c; }


  /* Placeholder */
  .tile--placeholder{
    display: grid;
    place-items: center;
    background:
      linear-gradient(135deg, rgba(0,0,0,.06), rgba(0,0,0,.02)),
      repeating-linear-gradient(
        45deg,
        rgba(0,0,0,.06) 0 10px,
        rgba(0,0,0,.03) 10px 20px
      );
    cursor: pointer;
  }
  .placeholder-inner{
    text-align: center;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: rgba(0,0,0,.65);
    user-select: none;
  }
  .placeholder-icon{
    display: block;
    font-size: 28px;
    margin-bottom: 8px;
  }
  .placeholder-text{
    font-size: 16px;
    font-weight: 600;
  }

  /* Tablet */
  @media (max-width: 992px){
    .image-grid{
      grid-template-columns:  1fr;
      grid-template-rows: 280px 220px 220px;
      grid-template-areas:
        "a a"
        "b b"
        "c c"
        
    }
    .image-grid{
      /* add an extra row for e */
      grid-auto-rows: 220px;
    }
    /* .tile--e{ height: 200px; } */
  }

  /* Mobile */
  @media (max-width: 560px){
    .image-grid{
      grid-template-columns: 1fr;
      grid-template-rows: 220px 180px 180px ;
      grid-template-areas:
        "a"
        "b"
        "c";
      gap: 14px;
      margin-bottom: -70px;
    }
  }