<style>
  /* The accordion container */
  .magazine-accordion {
    border-bottom: 1px solid #e5e5e5;
    padding: 15px 0;
  }
  
  /* The clickable Year heading */
  .magazine-accordion summary {
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    color: #8B1A1A; /* Matches the dark red from your site */
    list-style-type: disclosure-closed;
  }
  
  /* The invisible box holding the images */
  .magazine-grid {
    display: grid;
    /* This automatically scales for 1, 2, 3, or 4 images and handles mobile natively */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    padding-top: 20px;
  }

  /* The individual magazine item */
  .magazine-item {
    text-align: center;
  }

  /* Make sure images fit their container and have a nice shadow */
  .magazine-item img {
    width: 100%;
    max-width: 200px;
    height: auto;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
  }

  /* Slight hover effect for the images */
  .magazine-item img:hover {
    transform: scale(1.03);
  }

  /* The month text under the image */
  .magazine-item p {
    margin-top: 10px;
    font-weight: normal;
  }
</style>