/* Make photos span full width on narrow screens (mobile) */
@media (max-width: 640px) {
  /* Allow image containers to grow with image instead of fixed height */
  .image {
    height: auto !important;
    overflow: visible;
  }

  /* Make images fill the container width and preserve aspect ratio */
  .image img,
  .card-visual img,
  img {
    display: block;
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
    border-radius: 12px;
  }

  /* Placeholder blocks use normal flow and full width */
  .image.placeholder {
    padding: 1rem;
    height: auto !important;
    min-height: 0;
    border-radius: 12px;
    text-align: center;
  }

  /* Ensure card visuals and logos scale nicely on mobile */
  .card-visual,
  .card .image,
  .card .card-visual {
    width: 100%;
  }

  .logo {
    width: 100%;
    max-width: 220px;
    height: auto;
    border-radius: 12px;
    margin-bottom: 0.5rem;
  }

  /* Make the header banner adapt rather than stay tall */
  .site-header {
    height: auto;
    padding: 1rem 0;
    background-size: cover;
    background-position: center;
  }

  /* Reduce gaps and padding for small screens */
  .grid {
    gap: 1rem;
    padding: 0 1rem;
  }

  .card {
    padding: 1rem;
    border-radius: 12px;
  }
}