*,
   *::before,
   *::after {
       box-sizing: border-box;
       margin: 0;
       padding: 0;
   }

   :root {
       --bg: #ffffff;
       --fg: #333333;
       --accent: #888888;
       --gap: 6px;
       --cell: min(34vw, 34vh);
       /* --cell: 200px */
   }

   body {
       background: var(--bg);
       background: transparent;
       color: var(--fg);
       /* min-height: 100vh;
            display: flex; */
       flex-direction: column;
       align-items: center;
       justify-content: center;
       /* overflow: hidden; */
   }


   .grid-wrap {
       position: relative;
   }

   .grid {
       display: grid;
       grid-template-columns: repeat(3, var(--cell));
       grid-template-rows: repeat(1, var(--cell));
       gap: var(--gap);
       background: #fff;
       padding: var(--gap);
   }

   .cell {
       position: relative;
       overflow: hidden;
       cursor: default;
   }

   .cell img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       display: block;
       transition: opacity 0.7s ease;
   }

   /* Fade-out/in animation class */
   .cell.fading img {
       opacity: 0;
   }

   /* Subtle vignette on each cell */
   .cell::after {
       content: '';
       position: absolute;
       inset: 0;
       pointer-events: none;
   }

   /* Flash highlight on swap */
   .cell.flash::before {
       content: '';
       position: absolute;
       inset: 0;
       background: rgba(255, 255, 255, 0.4);
       animation: flashAnim 0.6s ease forwards;
       z-index: 2;
       pointer-events: none;
   }

   @keyframes flashAnim {
       0% {
           opacity: 1;
       }

       100% {
           opacity: 0;
       }