.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;  padding-inline: 30px; }
.el53-social-gallery__header { margin: 0 auto 40px; max-width: 760px; text-align: center; }
.el53-social-gallery__heading { color: inherit; font-size: clamp(16px, 1.15vw, 20px); font-weight: 700; letter-spacing: 0; line-height: 1.5; 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: 30px; grid-template-columns: repeat(5, minmax(0, 1fr)); position: relative; }
.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; width: 100%; }
.el53-social-gallery__overlay { background: rgba(35, 35, 35, .7); 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%, -50%); transition: opacity .3s ease; width: calc(100% - 28px); z-index: 1; }
.el53-social-gallery__content > i { color: #fff; font-size: 26px; line-height: 1; transform: scale(1.5); transition: transform .2s cubic-bezier(.37, .8, .63, 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__badge {
    align-items: center;
    background: #0c0c12;
    color: #fff;
    direction: ltr;
    display: flex;
    font-size: 13px;
    font-weight: 800;
    gap: 7px;
    justify-content: center;
    left: 50%;
    line-height: 1;
    min-height: 52px;
    padding: 0 24px;
    pointer-events: none;
    position: absolute;
    text-transform: uppercase;
    top: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    z-index: 3;
}
.el53-social-gallery__badge > i { font-size: 17px; }

.el53-social-gallery__link:hover .el53-social-gallery__overlay,
.el53-social-gallery__link:focus-visible .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 { opacity: 1; }
.el53-social-gallery__link:hover .el53-social-gallery__content > i,
.el53-social-gallery__link:focus-visible .el53-social-gallery__content > i { transform: scale(1); }
.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 { direction: ltr; gap: 30px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .el53-social-gallery__item { direction: rtl; }
    .el53-social-gallery__item:nth-child(4),
    .el53-social-gallery__item:nth-child(5) { transform: translateX(calc(50% + 15px)); }
}
@media (max-width: 575.98px) {
    .el53-social-gallery__container { padding-inline: 14px; }
    .el53-social-gallery__grid { gap: 30px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .el53-social-gallery__content { gap: 6px; }
    .el53-social-gallery__badge { min-height: 52px; padding-inline: 22px; }
}
@media (prefers-reduced-motion: reduce) { .el53-social-gallery__overlay, .el53-social-gallery__content, .el53-social-gallery__content > i { transition: none; } }