.modalGalleryOverlay {
        display: none !important;
        opacity: 0;
        transition: opacity 0.6s ease;
        &.active {
        display: flex !important;
        }
    }
    :root {
      --card-gap-actions: 16px;
    }
    .card-main-actions {
      display: flex;
      flex-direction: column-reverse;
      gap: var(--card-gap-actions);
      opacity: 0;
      transform: translateY(1rem);
      transition:
        opacity 0.3s,
        transform 0.3s;
      pointer-events: auto;
      height: 16px;
    }
    .card-main-actions.show {
      opacity: 1;
      transform: translateY(calc(var(--card-gap-actions) * -1));
      height: auto;
    }
    .card-main-info {
      transition: transform 0.3s;
      transform: translateY(calc(var(--card-gap-actions) * 2));
    }
    .card-main-info.raised {
      transform: translateY(0);
    }