/* DoctorX Gallery: photos in a grid that fits the width it gets. Colours follow the theme. */
.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; border: 1px solid rgba(0, 0, 0, .12); 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 on purpose: many themes give content images a margin with a rule that outranks a single class. */
.drx-gallery .drx-gallery-img { margin: 0; border-radius: 0; max-width: 100%; }
.drx-gallery-item figcaption { padding: 9px 12px 11px; font-size: .9rem; line-height: 1.4; }
@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; }
}