/* Set the container to use a grid layout */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Adjust column width */
    gap: 1rem; /* Space between blocks */
    padding: 1rem;
  }
  
  /* Each block should have a 1:1 aspect ratio and a black border */
  .block-item {
    position: relative;
  }


  .block {
    position: relative;
  }
  
  .block-item a {
    border: 1px solid black;
    aspect-ratio: 1 / 1; /* Enforce 1:1 aspect ratio */
    display: block;

  }
  /* Ensure images fit within the block without stretching */
  .block-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover; /* Ensure the image covers the block while maintaining aspect ratio */
  }
  
  /* Center align the title within the block */
  .block-item figcaption {
    font-size: 0.8em;
    margin-top: 0.5em;
    word-break: break-word;
    hyphens: auto;
  }

  .block-item h3 {
    font-size: 0.8em;
    margin-top: 0.5em;
    word-break: break-word;
    hyphens: auto;
  }
  
  /* Style text blocks */
  .block-item p {
    padding: 10px;
  }

  .block-item.Text .block {
    border: 1px solid black;
    aspect-ratio: 1 / 1; /* Enforce 1:1 aspect ratio */
    display: block;

  }

  .block-item.Media iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1; /* Enforce 1:1 aspect ratio */
  }
  
  /* Add some hover effects */
  .block-item:hover {
  }