/* Connecting Communities gallery modal state hooks. */
.impact-gallery-modal.is-open {
    visibility: visible;
    pointer-events: auto;
}

.impact-gallery-modal__close span:first-child {
    transform: rotate(45deg);
}

.impact-gallery-modal__close span:last-child {
    transform: rotate(-45deg);
}

.impact-gallery-modal__close:hover span:first-child {
    transform: rotate(135deg);
}

.impact-gallery-modal__close:hover span:last-child {
    transform: rotate(45deg);
}

.impact-gallery-modal__thumb.is-active {
    border-color: var(--color-brand-secondary);
    opacity: 1;
    transform: translateY(-2px);
}

/* Center the thumbnail strip when it's narrower than its container, without
   breaking scrolling when it overflows. `justify-content: center` on a
   scrollable flex container clips the start-side overflow instead of
   making it reachable (a long-standing flexbox bug) - on mobile this is
   exactly why the strip could be dragged toward the last thumb but never
   all the way back to the first one. Auto-margin spacers center it the
   same way when there's slack, but leave the full range scrollable when
   the content is wider than the viewport. */
.impact-gallery-modal__thumbs::before,
.impact-gallery-modal__thumbs::after {
    content: '';
    margin: auto;
    flex-shrink: 0;
}