&.is-desktop {
  &.fold-is-open > * {
    transform: translateX(600px);
  }
}

&.is-huge {
  &:before {
    /* never visible - this is used in jQuery to check the current MQ */
    content: 'desktop';
  }

  &.fold-is-open > * {
    /* reset style - on bigger devices we translate the gallery items */
    transform: translateX(0);
  }
}

// .main-container
& {
  overflow-x: hidden;

  &:before {
    /* never visible - this is used in jQuery to check the current MQ */
    content: 'mobile';
    display: none;
  }

  .gallery {
    width: 100%;

    &:before {
      /* this is the dark layer covering the .gallery when the .folding-panel is open */
      content: '';
      display: block;
      height: 100%;
      left: 0;
      opacity: 0;
      position: absolute;
      top: 0;
      visibility: hidden;
      width: 100%;
      z-index: 1;
    }
  }

  &.fold-is-open .gallery:before {
    opacity: 1;
    visibility: visible;
  }
}