.ltxe-sf { --ltxe-sf-cols: 3; --ltxe-sf-cols-tab: 2; --ltxe-sf-cols-mob: 1; --ltxe-sf-gap: 12px; --ltxe-sf-radius: 10px; } .ltxe-sf__grid { display: grid; grid-template-columns: repeat(var(--ltxe-sf-cols), minmax(0, 1fr)); gap: var(--ltxe-sf-gap); } .ltxe-sf--masonry .ltxe-sf__grid { display: block; columns: var(--ltxe-sf-cols); column-gap: var(--ltxe-sf-gap); } .ltxe-sf--masonry .ltxe-sf__card { break-inside: avoid; margin-bottom: var(--ltxe-sf-gap); } .ltxe-sf--list .ltxe-sf__grid { grid-template-columns: 1fr; } .ltxe-sf--carousel .ltxe-sf__grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; grid-template-columns: none; } .ltxe-sf--carousel .ltxe-sf__card { flex: 0 0 calc(100% / var(--ltxe-sf-cols)); scroll-snap-align: start; } .ltxe-sf__card { margin: 0; background: #fff; border-radius: var(--ltxe-sf-radius); overflow: hidden; box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08); } .ltxe-sf__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px 8px; } .ltxe-sf__brand { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .ltxe-sf__pill { font-size: 0.7rem; font-weight: 700; padding: 0.15em 0.55em; border-radius: 999px; background: #f3f4f6; color: #374151; } .ltxe-sf--instagram .ltxe-sf__brand { background: linear-gradient(135deg, #f9ce34, #ee2a7b, #6228d7); -webkit-background-clip: text; background-clip: text; color: transparent; } .ltxe-sf--twitter .ltxe-sf__brand { color: #0f1419; } .ltxe-sf--tiktok .ltxe-sf__brand { color: #111827; } .ltxe-sf__media { display: block; position: relative; width: 100%; padding: 0; border: 0; aspect-ratio: 1; background: #f3f4f6; cursor: pointer; } .ltxe-sf--twitter .ltxe-sf__media { aspect-ratio: 16 / 10; } .ltxe-sf--tiktok .ltxe-sf__media { aspect-ratio: 9 / 14; } .ltxe-sf--tiktok .ltxe-sf__media::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0; height: 0; margin: -12px 0 0 8px; border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent #fff; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35)); pointer-events: none; } .ltxe-sf__media img { display: block; width: 100%; height: 100%; object-fit: cover; } .ltxe-sf__media--placeholder { background: linear-gradient(135deg, #dbeafe 0%, #fce7f3 50%, #fef3c7 100%); min-height: 160px; } .ltxe-sf__caption { margin: 0; padding: 0.6em 0.8em 0.8em; font-size: 0.9em; line-height: 1.4; } .ltxe-sf__empty, .ltxe-sf__more { margin: 1em 0 0; } .ltxe-sf__more { display: inline-block; padding: 0.5em 1em; border: 1px solid currentColor; background: transparent; border-radius: 999px; cursor: pointer; } .ltxe-sf__dialog { border: 0; padding: 0; max-width: min(720px, 94vw); border-radius: 12px; } .ltxe-sf__dialog::backdrop { background: rgba(15, 23, 42, 0.55); } .ltxe-sf__dialog-inner { position: relative; padding: 1.25rem; } .ltxe-sf__dialog-close { position: absolute; top: 0.4rem; right: 0.5rem; border: 0; background: transparent; font-size: 1.6rem; line-height: 1; cursor: pointer; } .ltxe-sf__dialog-media img { display: block; width: 100%; height: auto; border-radius: 8px; } .ltxe-sf__dialog-link { display: inline-block; margin-top: 0.75rem; } @media (max-width: 1024px) { .ltxe-sf__grid { grid-template-columns: repeat(var(--ltxe-sf-cols-tab), minmax(0, 1fr)); } .ltxe-sf--masonry .ltxe-sf__grid { columns: var(--ltxe-sf-cols-tab); } } @media (max-width: 767px) { .ltxe-sf__grid { grid-template-columns: repeat(var(--ltxe-sf-cols-mob), minmax(0, 1fr)); } .ltxe-sf--masonry .ltxe-sf__grid { columns: var(--ltxe-sf-cols-mob); } }