@font-face {
      font-family: "04b_09";
      src: url("https://files.pressingz.net/fonts/dsg4/04b_09/04B_09__.TTF");
    }

  @font-face {
      font-family: "IBM-DOS";
      src: url("https://files.pressingz.net/fonts/oldskool/woff%20-%20Web%20(webfonts)/Web437_IBM_DOS_ISO9.woff");
    }

  body { 
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 1em; 
    background: #000;
    color: #ccc;
    font-family: "IBM-DOS", monospace;
  }

  #wrapper {
    max-width: 70%;
  }

  h1, h2, h3, h4, nav {
    font-family: "04b_09", monospace; 
  }

  a {
    color: #99cc00;
    text-decoration: none;
  }

  nav {
    border-bottom: 1px solid #000;
    }

  nav a { margin-right: 15px; 
    text-decoration: none; 
    font-weight: bold; 
    color: #333;
    }
  
  /* The Grid Container */
  .gallery { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 
    grid-auto-rows: 200px; /* Fixed row height gives a predictable base unit for spanning */
    gap: 20px; 
    margin-top: 20px; 
    grid-auto-flow: dense; /* Instructs browser to fill empty layout gaps retroactively */
  }
  
  /* The Grid Items */
  .art-card { 
    border: 1px solid #fff; 
  }

  .art-card:hover {
     filter: brightness(80%);
    }

  /* Spanning rules based on Eleventy Front Matter data */
  .art-card.wide\; {
    grid-column: span 2 !important;
  }
  
  .art-card.tall\; {
    grid-row: span 2 !important; 
  }

  .art-card.tall {
  grid-row: span 2 !important; 
  }

  .art-card.wide {
  grid-column: span 2 !important;
  }

  /* The Actual Images */
  .art-card img { 
    width: 100%; 
    height: 100%; /* Spans the full height of the wrapper grid-cell */
    object-fit: cover; /* Perfectly fills the bounding box without distortion */
  }