.tfg-gallery { width: 100%; }
.tfg-gallery-month { margin-block: 0 3rem; }
.tfg-gallery-month__heading { margin: 0 0 1.25rem; font: 600 clamp(1.5rem, 2vw, 2rem)/1.2 Georgia, serif; }
.tfg-gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.tfg-gallery-card { position: relative; display: block; aspect-ratio: 16/9; overflow: hidden; border-radius: 1.5rem; color: #fff; background: #201625; isolation: isolate; text-decoration: none; }
.tfg-gallery-card:focus-visible { outline: 3px solid #d84fff; outline-offset: 3px; }
.tfg-gallery-card__image { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.tfg-gallery-card:hover .tfg-gallery-card__image { transform: scale(1.04); }
.tfg-gallery-card__shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 32%, rgba(0,0,0,.74) 100%); }
.tfg-gallery-card__body { position: absolute; inset: auto 1.25rem 1.1rem; display: block; }
.tfg-gallery-card__title { display: block; font: 700 clamp(1.2rem, 2vw, 1.75rem)/1.1 Georgia, 'Times New Roman', serif; text-shadow: 0 1px 3px #0009; }
.tfg-gallery-card__meta { display: flex; justify-content: space-between; gap: .75rem; margin-top: .5rem; font: 400 .875rem/1.3 Georgia, serif; }
.tfg-gallery-card__play { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; background: #fffde8; color: #514c4e; transform: translate(-50%, -50%); font-size: 1.5rem; }
.tfg-gallery-card__play span { margin-left: .18rem; }
.tfg-gallery-pagination { display: flex; justify-content: center; gap: 1.25rem; margin-block: 2rem; }
.tfg-gallery-pagination a { display: inline-block; padding: .65rem 1.2rem; border-radius: 999px; border: 1px solid currentColor; }
@media (max-width: 1024px) { .tfg-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .tfg-gallery-grid { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; } .tfg-gallery-card__body { inset-inline: 1rem; } }
@media (prefers-reduced-motion: reduce) { .tfg-gallery-card__image { transition: none; } }