/* LG96 content media — shared across lg96.bet / lg96.win / lg96th / lg96slot.
   Images that carry text always use object-fit:contain so nothing is cropped or stretched. */

/* Hero banner (home page only) — natural 1920x500 desktop / 1200x600 mobile */
.content-hero{display:block;width:100%;margin:1.5rem 0 0;overflow:hidden;border-radius:16px}
.content-hero picture{display:block;width:100%}
.content-hero img{display:block;width:100%;height:auto;max-width:100%;object-fit:contain}

/* Square card galleries — auto-fill keeps every card at a readable size
   even when the gallery sits inside a narrow layout column. */
.content-promo-gallery,.content-article-gallery,.content-guide-gallery{display:grid;gap:1rem;margin:1.5rem 0 2rem}
.content-promo-gallery{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.content-article-gallery,.content-guide-gallery{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}

.content-promo-card,.content-article-card,.content-guide-card{margin:0;display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(160,180,220,.2);border-radius:14px;background:rgba(255,255,255,.035)}
.content-promo-card img,.content-article-card img,.content-guide-card img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;background:rgba(0,0,0,.14)}
.content-promo-card figcaption,.content-article-card figcaption,.content-guide-card figcaption{padding:.75rem 1rem;font-weight:600;line-height:1.45}

/* Banner-shaped image inside an article — keeps its natural proportions */
.content-article-banner{display:block;width:100%;margin:1.5rem 0 2rem;overflow:hidden;border:1px solid rgba(160,180,220,.2);border-radius:14px;background:rgba(255,255,255,.035)}
.content-article-banner picture{display:block;width:100%}
.content-article-banner img{display:block;width:100%;height:auto;max-width:100%;object-fit:contain}
.content-article-banner figcaption{padding:.75rem 1rem;font-weight:600;line-height:1.45}

/* Brand imagery (about / faq) and LINE rich menu (contact) */
.content-brand-image,.content-rich-menu{display:block;width:min(100%,620px);height:auto;margin:1.5rem auto 2rem;border:1px solid rgba(160,180,220,.2);border-radius:14px;object-fit:contain}
.content-brand-image{aspect-ratio:1/1}
.content-rich-menu{aspect-ratio:3/2}
.content-brand-pair{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;width:min(100%,620px);margin:1.5rem auto 2rem}
.content-brand-pair img{width:100%;margin:0}

/* Home page quick links */
.content-home-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin:1rem 0 0}
.content-home-link{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:68px;padding:.85rem 1rem;border:1px solid rgba(255,255,255,.18);border-radius:12px;background:rgba(255,255,255,.04);color:inherit;text-decoration:none;transition:transform .2s ease,border-color .2s ease,background .2s ease}
.content-home-link strong,.content-home-link small{display:block}
.content-home-link strong{font-size:.96rem;line-height:1.25}
.content-home-link small{margin-top:.25rem;opacity:.72;line-height:1.35}
.content-home-link>b{font-size:1.2rem;opacity:.8}
.content-home-link:hover,.content-home-link:focus-visible{transform:translateY(-2px);border-color:rgba(255,215,120,.75);background:rgba(255,255,255,.09)}

@media(max-width:700px){.content-home-links{grid-template-columns:1fr}}