.el53-social-gallery {
    --el53-background: transparent;
    --el53-text: var(--text-primary, #15151a);
    --el53-accent: var(--color-primary, #ff5e14);
    background: var(--el53-background);
    color: var(--el53-text);
}

.el53-social-gallery__container { margin-inline: auto; max-width: 1720px; padding-inline: clamp(16px, 3.1vw, 54px); }
.el53-social-gallery__header { margin: 0 auto 34px; max-width: 760px; text-align: center; }
.el53-social-gallery__heading { color: inherit; font-size: clamp(28px, 3.4vw, 48px); font-weight: 800; letter-spacing: -.035em; line-height: 1.14; margin: 0; }
.el53-social-gallery__intro { color: color-mix(in srgb, var(--el53-text) 68%, transparent); font-size: 15px; line-height: 1.9; margin-top: 12px; }
.el53-social-gallery__intro > :last-child { margin-bottom: 0; }

.el53-social-gallery__grid { display: grid; gap: clamp(12px, 2.2vw, 38px); grid-template-columns: repeat(5, minmax(0, 1fr)); }
.el53-social-gallery__item { min-width: 0; }
.el53-social-gallery__link { aspect-ratio: 1 / 1; background: color-mix(in srgb, var(--el53-text) 12%, transparent); color: #fff; display: block; overflow: hidden; position: relative; text-decoration: none; }
.el53-social-gallery__link img { display: block; height: 100%; object-fit: cover; transform: scale(1.001); transition: transform .55s cubic-bezier(.22, 1, .36, 1), filter .4s ease; width: 100%; }
.el53-social-gallery__overlay { background: rgba(11, 11, 15, .66); inset: 0; opacity: 0; position: absolute; transition: opacity .3s ease; }
.el53-social-gallery__content { align-items: center; display: flex; flex-direction: column; gap: 8px; inset: 50% auto auto 50%; justify-content: center; opacity: 0; position: absolute; text-align: center; transform: translate(-50%, calc(-50% + 16px)); transition: opacity .25s ease, transform .38s cubic-bezier(.22, 1, .36, 1); width: calc(100% - 28px); z-index: 1; }
.el53-social-gallery__content > i { color: #fff; font-size: clamp(26px, 2.1vw, 38px); line-height: 1; }
.el53-social-gallery__label { color: #fff; font-size: clamp(11px, .8vw, 14px); font-weight: 800; letter-spacing: .08em; line-height: 1.35; text-transform: uppercase; }

.el53-social-gallery__link:hover .el53-social-gallery__overlay,
.el53-social-gallery__link:focus-visible .el53-social-gallery__overlay,
.el53-social-gallery__link--disabled .el53-social-gallery__overlay,
.el53-social-gallery--mock .el53-social-gallery__overlay { opacity: 1; }
.el53-social-gallery__link:hover .el53-social-gallery__content,
.el53-social-gallery__link:focus-visible .el53-social-gallery__content,
.el53-social-gallery__link--disabled .el53-social-gallery__content,
.el53-social-gallery--mock .el53-social-gallery__content { opacity: 1; transform: translate(-50%, -50%); }
.el53-social-gallery__link:hover img, .el53-social-gallery__link:focus-visible img { filter: saturate(1.08); transform: scale(1.07); }
.el53-social-gallery__link:focus-visible { outline: 3px solid var(--el53-accent); outline-offset: 4px; }
.el53-social-gallery__placeholder { align-items: center; color: color-mix(in srgb, var(--el53-text) 48%, transparent); display: flex; font-size: 38px; height: 100%; justify-content: center; }

@media (max-width: 991.98px) { .el53-social-gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575.98px) {
    .el53-social-gallery__container { padding-inline: 18px; }
    .el53-social-gallery__header { margin-bottom: 24px; }
    .el53-social-gallery__grid { gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .el53-social-gallery__content { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) { .el53-social-gallery__link img, .el53-social-gallery__overlay, .el53-social-gallery__content { transition: none; } }
