/* Real photographs, in a grid that fits the width it gets. */
.drx-gallery { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin: 18px 0; }
.drx-gallery-2 { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.drx-gallery-4 { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.drx-gallery-item { margin: 0; background: #fff; border: 1px solid #E4DACB; border-radius: 10px; overflow: hidden; }
.drx-gallery-item a { display: block; line-height: 0; }
.drx-gallery-img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
/* ⛔ TWO CLASSES, DELIBERATELY. The theme sets `.entry img{margin:1.4em 0}`, which is one class
   plus one element and so outranks a single class: 48px of empty white under every photograph
   inside its card, and the gallery looked half broken. The card already carries the rounding,
   so the image gives that up too. */
.drx-gallery .drx-gallery-img { margin: 0; border-radius: 0; }
.drx-gallery-item figcaption { padding: 9px 12px 11px; font-size: .9rem; line-height: 1.4; color: #3B342E; }
.drx-gallery-home .drx-gallery { margin-top: 6px; }
@media (max-width: 560px) { .drx-gallery, .drx-gallery-2, .drx-gallery-4 { grid-template-columns: 1fr 1fr; gap: 10px; } .drx-gallery-img { aspect-ratio: 1 / 1; } .drx-gallery-item figcaption { font-size: .82rem; padding: 7px 9px 9px; } }
@media (max-width: 380px) { .drx-gallery, .drx-gallery-2, .drx-gallery-4 { grid-template-columns: 1fr; } }