lightbox

A lightbox is a Dialog window, appearing on top of the viewport, blocking and dimming its background. It comes in 4 variants:

  • The default lightbox has an image and a white bar with a close icon on top of it.
  • The lightbox has a short caption below the image.
  • The lightbox has a long caption below the image. This can be shown or hidden through toggling a button.
  • The lightbox has more than one image and a white bar with controls (next image, previous image, current number of image shown) underneath it.

This component comes with a full API documentation at the end of this page.

For accessibility reasons, a keyboard trap is highly recommended in this component. However, to prevent some unpredictable side effects (the page freezing, the user is stuck in an infinite loop, etc.), the keyboard trap was not set for this page to work correctly. Therefore it needs to be set by the developer.
table of content

component variations

Default Lightbox

This component is only meant to be used in a full page and won't render / behave correctly here. Please use the button below (Open on blank page) to see the component in action.
Open on blank page
<div
  class="frontend-kit-example_modal-lightbox"
  data-frok-show-lightbox="default-lightbox"
>
  <button
    type="button"
    class="a-button a-button--primary -without-icon"
    data-frok-action="show"
  >
    <span class="a-button__label">click here</span>
  </button>
  <div
    class="m-lightbox"
    id="frontend-kit-lightbox-default-lightbox"
    role="figure"
    aria-label="frontend-kit-lightbox-default-lightbox-title"
  >
    <div class="a-box--modal">
      <div class="m-lightbox__wrapper -floating">
        <div class="m-lightbox__aspect-wrapper">
          <div class="m-lightbox__background -floating-shadow-s"></div>
          <div class="m-lightbox__header -floating">
            <button
              type="button"
              class="a-button a-button--integrated -without-label"
              data-frok-action="close"
              aria-label="close lightbox"
            >
              <i class="a-icon a-button__icon ui-ic-close"></i>
            </button>
          </div>
          <div class="m-lightbox__content -floating">
            <div class="m-lightbox__image-wrapper">
              <figure class="a-image">
                <div class="a-image__ratioWrapper">
                  <img
                    src="https://brandguide-cdn.azureedge.net/frontend-kit/example-image-1600w.jpg"
                    srcset="
                      https://brandguide-cdn.azureedge.net/frontend-kit/example-image-400w.jpg   400w,
                      https://brandguide-cdn.azureedge.net/frontend-kit/example-image-800w.jpg   800w,
                      https://brandguide-cdn.azureedge.net/frontend-kit/example-image-1600w.jpg 1600w
                    "
                    alt="Lorem ipsum dolor sit amet"
                  />
                </div>
              </figure>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Default Lightbox with short caption

This component is only meant to be used in a full page and won't render / behave correctly here. Please use the button below (Open on blank page) to see the component in action.
Open on blank page
<div
  class="frontend-kit-example_modal-lightbox"
  data-frok-show-lightbox="default-lightbox-with-short-caption"
>
  <button
    type="button"
    class="a-button a-button--primary -without-icon"
    data-frok-action="show"
  >
    <span class="a-button__label">click here</span>
  </button>
  <div
    class="m-lightbox -extended"
    id="frontend-kit-lightbox-default-lightbox-with-short-caption"
    role="figure"
    aria-label="frontend-kit-lightbox-default-lightbox-with-short-caption-title"
  >
    <div class="a-box--modal">
      <div class="m-lightbox__wrapper -floating">
        <div class="m-lightbox__aspect-wrapper">
          <div class="m-lightbox__background -floating-shadow-s"></div>
          <div class="m-lightbox__header -floating">
            <button
              type="button"
              class="a-button a-button--integrated -without-label"
              data-frok-action="close"
              aria-label="close lightbox"
            >
              <i class="a-icon a-button__icon ui-ic-close"></i>
            </button>
          </div>
          <div class="m-lightbox__content -floating">
            <div class="m-lightbox__image-wrapper">
              <figure class="a-image">
                <div class="a-image__ratioWrapper">
                  <img
                    src="https://brandguide-cdn.azureedge.net/frontend-kit/example-image-1600w.jpg"
                    srcset="
                      https://brandguide-cdn.azureedge.net/frontend-kit/example-image-400w.jpg   400w,
                      https://brandguide-cdn.azureedge.net/frontend-kit/example-image-800w.jpg   800w,
                      https://brandguide-cdn.azureedge.net/frontend-kit/example-image-1600w.jpg 1600w
                    "
                    alt="Lorem ipsum dolor sit amet"
                  />
                </div>
                <figcaption>
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr
                </figcaption>
              </figure>
            </div>
          </div>
          <div class="m-lightbox__footer -floating">
            <button
              type="button"
              class="a-button a-button--integrated -without-label m-lightbox__expand"
              data-frok-action="expand"
              aria-label="expand additional content lightbox"
            >
              <i class="a-icon a-button__icon ui-ic-up"></i>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Default Lightbox with long caption

This component is only meant to be used in a full page and won't render / behave correctly here. Please use the button below (Open on blank page) to see the component in action.
Open on blank page
<div
  class="frontend-kit-example_modal-lightbox"
  data-frok-show-lightbox="default-lightbox-with-long-caption"
>
  <button
    type="button"
    class="a-button a-button--primary -without-icon"
    data-frok-action="show"
  >
    <span class="a-button__label">click here</span>
  </button>
  <div
    class="m-lightbox -extended"
    id="frontend-kit-lightbox-default-lightbox-with-long-caption"
    role="figure"
    aria-label="frontend-kit-lightbox-default-lightbox-with-long-caption-title"
  >
    <div class="a-box--modal">
      <div class="m-lightbox__wrapper -floating">
        <div class="m-lightbox__aspect-wrapper">
          <div class="m-lightbox__background -floating-shadow-s"></div>
          <div class="m-lightbox__header -floating">
            <button
              type="button"
              class="a-button a-button--integrated -without-label"
              data-frok-action="close"
              aria-label="close lightbox"
            >
              <i class="a-icon a-button__icon ui-ic-close"></i>
            </button>
          </div>
          <div class="m-lightbox__content -floating">
            <div class="m-lightbox__image-wrapper">
              <figure class="a-image">
                <div class="a-image__ratioWrapper">
                  <img
                    src="https://brandguide-cdn.azureedge.net/frontend-kit/example-image-1600w.jpg"
                    srcset="
                      https://brandguide-cdn.azureedge.net/frontend-kit/example-image-400w.jpg   400w,
                      https://brandguide-cdn.azureedge.net/frontend-kit/example-image-800w.jpg   800w,
                      https://brandguide-cdn.azureedge.net/frontend-kit/example-image-1600w.jpg 1600w
                    "
                    alt="Lorem ipsum dolor sit amet"
                  />
                </div>
                <figcaption>
                  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                  Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
                  natoque penatibus et magnis dis parturient montes, nascetur
                  ridiculus mus. Donec quam felis, ultricies nec, pellentesque
                  eu, pretium quis, sem. Nulla consequat massa quis enim. Donec
                  pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
                  In enim justo, rhoncus ut, imperdiet a, venenatis vitae,
                  justo. Nullam dictum felis eu pede mollis pretium. Integer
                  tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean
                  vulputate eleifend tellus. Aenean leo ligula, porttitor eu,
                  consequat vitae, eleifend ac, enim. Aliquam lorem ante,
                  dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra
                  nulla ut metus varius laoreet. Quisque rutrum.
                </figcaption>
              </figure>
            </div>
          </div>
          <div class="m-lightbox__footer -floating">
            <button
              type="button"
              class="a-button a-button--integrated -without-label m-lightbox__expand"
              data-frok-action="expand"
              aria-label="expand additional content lightbox"
            >
              <i class="a-icon a-button__icon ui-ic-up"></i>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Lightbox with a sequence of images

This component is only meant to be used in a full page and won't render / behave correctly here. Please use the button below (Open on blank page) to see the component in action.
Open on blank page
<div
  class="frontend-kit-example_modal-lightbox"
  data-frok-show-lightbox="lightbox-with-a-sequence-of-images"
>
  <button
    type="button"
    class="a-button a-button--primary -without-icon"
    data-frok-action="show"
  >
    <span class="a-button__label">click here</span>
  </button>
  <div
    class="m-lightbox m-lightbox--sequence"
    id="frontend-kit-lightbox-lightbox-with-a-sequence-of-images"
    role="figure"
    aria-label="frontend-kit-lightbox-lightbox-with-a-sequence-of-images-title"
  >
    <div class="a-box--modal">
      <div class="m-lightbox__wrapper -floating">
        <div class="m-lightbox__aspect-wrapper">
          <div class="m-lightbox__background -floating-shadow-s"></div>
          <div class="m-lightbox__header -floating">
            <button
              type="button"
              class="a-button a-button--integrated -without-label"
              data-frok-action="close"
              aria-label="close lightbox"
            >
              <i class="a-icon a-button__icon ui-ic-close"></i>
            </button>
          </div>
          <div class="m-lightbox__content -floating">
            <div class="m-lightbox__image-wrapper">
              <figure class="a-image">
                <div class="a-image__ratioWrapper">
                  <img
                    src="https://brandguide-cdn.azureedge.net/frontend-kit/example-image-1600w.jpg"
                    srcset="
                      https://brandguide-cdn.azureedge.net/frontend-kit/example-image-400w.jpg   400w,
                      https://brandguide-cdn.azureedge.net/frontend-kit/example-image-800w.jpg   800w,
                      https://brandguide-cdn.azureedge.net/frontend-kit/example-image-1600w.jpg 1600w
                    "
                    alt="Lorem ipsum dolor sit amet"
                  />
                </div>
              </figure>
              <figure class="a-image">
                <div class="a-image__ratioWrapper">
                  <img
                    src="https://brandguide-cdn.azureedge.net/frontend-kit/example-image-1600w-2.jpg"
                    srcset="
                      https://brandguide-cdn.azureedge.net/frontend-kit/example-image-400w-2.jpg   400w,
                      https://brandguide-cdn.azureedge.net/frontend-kit/example-image-800w-2.jpg   800w,
                      https://brandguide-cdn.azureedge.net/frontend-kit/example-image-1600w-2.jpg 1600w
                    "
                    alt="Lorem ipsum dolor sit amet"
                  />
                </div>
              </figure>
              <figure class="a-image">
                <div class="a-image__ratioWrapper">
                  <img
                    src="https://brandguide-cdn.azureedge.net/frontend-kit/example-image-1600w.jpg"
                    srcset="
                      https://brandguide-cdn.azureedge.net/frontend-kit/example-image-400w.jpg   400w,
                      https://brandguide-cdn.azureedge.net/frontend-kit/example-image-800w.jpg   800w,
                      https://brandguide-cdn.azureedge.net/frontend-kit/example-image-1600w.jpg 1600w
                    "
                    alt="Lorem ipsum dolor sit amet"
                  />
                </div>
              </figure>
            </div>
          </div>
          <div class="m-lightbox__footer -floating">
            <div class="m-lightbox__counter -floating">1 / 3</div>
            <button
              type="button"
              class="a-button a-button--integrated -without-label m-lightbox__expand"
              data-frok-action="expand"
              aria-label="expand additional content lightbox"
            >
              <i class="a-icon a-button__icon ui-ic-up"></i>
            </button>
            <div class="m-lightbox__sequence-buttons -floating">
              <button
                type="button"
                class="a-button a-button--integrated -without-label"
                data-frok-action="left"
                aria-label="previous image lightbox"
              >
                <i class="a-icon a-button__icon ui-ic-left"></i>
              </button>
              <button
                type="button"
                class="a-button a-button--integrated -without-label"
                data-frok-action="right"
                aria-label="next image lightbox"
              >
                <i class="a-icon a-button__icon ui-ic-right"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Lightbox with a sequence of images with captions

This component is only meant to be used in a full page and won't render / behave correctly here. Please use the button below (Open on blank page) to see the component in action.
Open on blank page
<div
  class="frontend-kit-example_modal-lightbox"
  data-frok-show-lightbox="lightbox-with-a-sequence-of-images-with-captions"
>
  <button
    type="button"
    class="a-button a-button--primary -without-icon"
    data-frok-action="show"
  >
    <span class="a-button__label">click here</span>
  </button>
  <div
    class="m-lightbox -extended m-lightbox--sequence"
    id="frontend-kit-lightbox-lightbox-with-a-sequence-of-images-with-captions"
    role="figure"
    aria-label="frontend-kit-lightbox-lightbox-with-a-sequence-of-images-with-captions-title"
  >
    <div class="a-box--modal">
      <div class="m-lightbox__wrapper -floating">
        <div class="m-lightbox__aspect-wrapper">
          <div class="m-lightbox__background -floating-shadow-s"></div>
          <div class="m-lightbox__header -floating">
            <button
              type="button"
              class="a-button a-button--integrated -without-label"
              data-frok-action="close"
              aria-label="close lightbox"
            >
              <i class="a-icon a-button__icon ui-ic-close"></i>
            </button>
          </div>
          <div class="m-lightbox__content -floating">
            <div class="m-lightbox__image-wrapper">
              <figure class="a-image">
                <div class="a-image__ratioWrapper">
                  <img
                    src="https://brandguide-cdn.azureedge.net/frontend-kit/example-image-1600w.jpg"
                    srcset="
                      https://brandguide-cdn.azureedge.net/frontend-kit/example-image-400w.jpg   400w,
                      https://brandguide-cdn.azureedge.net/frontend-kit/example-image-800w.jpg   800w,
                      https://brandguide-cdn.azureedge.net/frontend-kit/example-image-1600w.jpg 1600w
                    "
                    alt="Lorem ipsum dolor sit amet"
                  />
                </div>
                <figcaption>
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr
                </figcaption>
              </figure>
              <figure class="a-image">
                <div class="a-image__ratioWrapper">
                  <img
                    src="https://brandguide-cdn.azureedge.net/frontend-kit/example-image-1600w.jpg"
                    srcset="
                      https://brandguide-cdn.azureedge.net/frontend-kit/example-image-400w-2.jpg   400w,
                      https://brandguide-cdn.azureedge.net/frontend-kit/example-image-800w-2.jpg   800w,
                      https://brandguide-cdn.azureedge.net/frontend-kit/example-image-1600w-2.jpg 1600w
                    "
                    alt="Lorem ipsum dolor sit amet"
                  />
                </div>
                <figcaption>
                  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                  Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
                  natoque penatibus et magnis dis parturient montes, nascetur
                  ridiculus mus. Donec quam felis, ultricies nec, pellentesque
                  eu, pretium quis, sem. Nulla consequat massa quis enim. Donec
                  pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
                  In enim justo, rhoncus ut, imperdiet a, venenatis vitae,
                  justo. Nullam dictum felis eu pede mollis pretium. Integer
                  tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean
                  vulputate eleifend tellus. Aenean leo ligula, porttitor eu,
                  consequat vitae, eleifend ac, enim. Aliquam lorem ante,
                  dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra
                  nulla ut metus varius laoreet. Quisque rutrum.
                </figcaption>
              </figure>
              <figure class="a-image">
                <div class="a-image__ratioWrapper">
                  <img
                    src="https://brandguide-cdn.azureedge.net/frontend-kit/example-image-1600w.jpg"
                    srcset="
                      https://brandguide-cdn.azureedge.net/frontend-kit/example-image-400w.jpg   400w,
                      https://brandguide-cdn.azureedge.net/frontend-kit/example-image-800w.jpg   800w,
                      https://brandguide-cdn.azureedge.net/frontend-kit/example-image-1600w.jpg 1600w
                    "
                    alt="Lorem ipsum dolor sit amet"
                  />
                </div>
                <figcaption>
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr
                </figcaption>
              </figure>
            </div>
          </div>
          <div class="m-lightbox__footer -floating">
            <div class="m-lightbox__counter -floating">1 / 3</div>
            <button
              type="button"
              class="a-button a-button--integrated -without-label m-lightbox__expand"
              data-frok-action="expand"
              aria-label="expand additional content lightbox"
            >
              <i class="a-icon a-button__icon ui-ic-up"></i>
            </button>
            <div class="m-lightbox__sequence-buttons -floating">
              <button
                type="button"
                class="a-button a-button--integrated -without-label"
                data-frok-action="left"
                aria-label="previous image lightbox"
              >
                <i class="a-icon a-button__icon ui-ic-left"></i>
              </button>
              <button
                type="button"
                class="a-button a-button--integrated -without-label"
                data-frok-action="right"
                aria-label="next image lightbox"
              >
                <i class="a-icon a-button__icon ui-ic-right"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

additional content

demo

import WindowWithFrontendKit from '../../WindowWithFrontendKit';

export default (): void => {
  const { boschFrontendKit } = (window as unknown) as WindowWithFrontendKit;

  const lightboxExamples = document.getElementsByClassName(
    'frontend-kit-example_modal-lightbox',
  );

  [...lightboxExamples].forEach(container => {
    // a trigger that launches the modal
    const trigger = container.getElementsByClassName('a-button')[0];
    // the lightbox identifier
    const lightboxId = container.getAttribute('data-frok-show-lightbox');

    // the element containing the lightbox
    const lightboxElement = boschFrontendKit.Lightbox.findLightbox(lightboxId);

    // the actual component
    const lightbox = lightboxElement.component;

    lightbox.addEventListener('closeClicked', () => lightbox.hide());
    lightbox.addEventListener('next', (index: number) => lightbox.next(index));
    lightbox.addEventListener('back', (index: number) => lightbox.back(index));
    lightbox.addEventListener('backgroundClicked', () => lightbox.hide());

    if (trigger){
      trigger.addEventListener('click', () =>
        boschFrontendKit.Lightbox.showLightbox(lightboxId),
      );
    }
  });
};

styles SCSS

/* stylelint-disable
  declaration-colon-space-after,
  length-zero-no-unit,
  a11y/no-display-none,
  selector-no-qualifying-type
  */

/* none-zero units are needed, so that the calculations will work */

/* css custom property --width-fix is the number which allows us to take the space around
the light box into account
the other values are
  --offset-header: number which determines how much the header will be move up
  --offset-content: number which determines how much the content will be moved down;
  --offset-footer: number which determines how much the footer will be moved down;
  --content-height-fix: number which determines if the image have a caption and take this into account;
  --background-height: number which the height of the background of the lightbox
  --caption-height-fix: number which presents the cumulated height of header and footer;
  --caption-height-mobile:number which determines how much space is available for the caption;

There are 4 different markup variants to be handled
  (A) Default: Header + Content
  (B) Caption (short/long): Header + Content + Caption + Footer (initial hidden, only needed for long caption, will be determined in JS)
  (C) Sequence: Header + Content + Footer
  (D) Sequence with Caption: Header + Content + Caption + Footer (only expand button hidden, will be determined in JS)
*/


// (A)
.m-lightbox {
  --ratio-width: 16;
  --ratio-height: 9;
  --width-fix: 10.6rem;
  --offset-header: 0rem;
  --offset-content: 0rem;
  --offset-footer: 0rem;
  --content-height-fix: 0rem;
  --header-height: 3rem;
  --footer-height: 0rem;
  --background-height: calc(100% + calc(var(--header-height) + var(--footer-height) + var(--content-height-fix)));
  --caption-height-fix: calc((var(--header-height) + var(--footer-height)));
  --caption-height-mobile:
    calc(
      100vh - var(--caption-height-fix) - 100vw /
      (var(--ratio-width) / var(--ratio-height))
    );

  // background is used to get floating background
  &__background {
    position: fixed;
    top: var(--offset-header);
    height: var(--background-height);
    width: 100%;
    left: 0;
    
    @include floating-outline;
  }

  // wrapper is responsible for getting the spacing around the light box in tablet viewport
  // on mobile no spacing is visible
  &__wrapper {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: grid;
    place-items: center;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: 'center';
  }

  // aspect-wrapper will generate the correct 16:9 ratio for the content
  &__aspect-wrapper {
    grid-area: center;
    position: relative;
    width: 100%;
    max-width:
      calc(
        calc(var(--ratio-width) / var(--ratio-height) * 100vh) - var(--width-fix)
      );

    &::after {
      content: '';
      display: block;
      padding-top: calc(var(--ratio-height) / var(--ratio-width) * 100%);
    }
  }

  // header and footer will be taken out of the site flow
  // to be attached to the top/bottom of the page
  &__header,
  &__footer {
    position: fixed;
    left: 0;
    height: 3rem;
    width: 100%;
  }

  &__header {
    display: flex;
    justify-content: flex-end;
    top: var(--offset-header);
    z-index: 1;
  }

  &__content {
    position: absolute;
    top: var(--offset-content);
    width: 100%;
    height: calc(100% + var(--content-height-fix));
  }

  .a-image {
    display: none;

    &.-active {
      display: block;
    }
  }

  // footer is not visible in default case
  // only visible when caption is to long or sequence variant
  &__footer {
    display: none;
    bottom: var(--offset-footer);
    grid-template-areas: 'controls';
    grid-template-rows: 3rem;
    background-color: var(--plain__enabled__fill__default);

    .m-lightbox__counter {
      grid-area: controls;
      place-self: center start;
      height: 3rem;
      padding: 0 1rem;
      display: flex;
      align-items: center;
      font-size: 0.75rem;
    }

    .m-lightbox__expand {
      display: none;
      grid-area: controls;
      place-self: center;

      > i {
        height: 3rem;
        width: 3rem;
        display: block;
      }

      &.-open {
        transform: rotate(180deg);
      }

      .m-lightbox.-long-caption & {
        display: block;
      }
    }

    .m-lightbox__sequence-buttons {
      grid-area: controls;
      place-self: center end;
    }
  }

  // (C)
  &--sequence {
    --width-fix: 10.6rem;

    .m-lightbox__image-wrapper {
      overflow: hidden;
    }

    .m-lightbox__footer {
      display: grid;
    }
  }

  // (B) short caption
  &.-extended {
    --width-fix: 10.6rem;

    .m-lightbox__aspect-wrapper {
      position: absolute;
      top: 3rem;
    }

    // (B) long caption
    &.-long-caption {
      --footer-height: 3rem;

      .m-lightbox__footer::after {
        content: '';
        position: absolute;
        top: -1rem;
        left: 0;
        background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0), var(--background) 90%);
        width: 100%;
        height: 1rem;
      }


      // open class to move caption up to be readable
      // only needed when height of caption is higher than available space
      // if this is necessary should be determined in JS
      figcaption.-open {
        position: fixed;
        top: unset;
        bottom: 3rem;
        max-height: unset;
        padding-bottom: 1rem;
      }

      .m-lightbox__footer {
        display: grid;
      }
    }

    figcaption {
      position: absolute;
      margin: 0;
      padding: 1rem 1rem 0;
      width: 100%;
      max-width: 40rem;
      height: auto;
      max-height: var(--caption-height-mobile);
      top: 100%;
      overflow: hidden;
      background-color: var(--background);

      &::before {
        position: absolute;
        display: inline-block;
        content: '';
        background-color: var(--background);
        top: 0;
        left: 100%;
        height: 100%;
        width: 100vw;
      }
    }
  }

  @media (max-width: 767px) and (orientation: landscape) {
    // reducing fixed with to zero, so the content goes to the viewport borders
    // reset all -extended / --sequence styles to achieve same style as default version
    --width-fix: 0rem;

    &__footer {
      display: none;
      background-color: transparent;
    }

    &.m-lightbox--sequence {
      --width-fix: 0rem;

      .m-lightbox__footer::after {
        display: none;
      }

      .m-lightbox__footer {
        display: grid;
      }
    }

    &.-extended {
      --width-fix: 0rem;

      .m-lightbox__aspect-wrapper {
        position: relative;
        top: unset;
      }

      &.-long-caption .m-lightbox__footer::after {
        display: none;
      }

      &.-long-caption .m-lightbox__footer .m-lightbox__expand {
        display: none;
      }
    }

    &__header {
      width: 3rem;
      left: auto;
      right: 0;
    }

    // no caption visible in mobile landscape mode
    figcaption {
      display: none;
    }
  }
}

@media (min-width: 768px) {
  // (A)
  .m-lightbox {
    --width-fix: 16rem;
    --offset-header: -1.5rem;
    --offset-content: 1.5rem;

    &__background {
      position: absolute;
    }

    // adjust grid to have spacing around the lightbox
    // background to transparent, background will now be handled by "a-box"
    &__wrapper {
      grid-template-columns: 3rem 1fr 3rem;
      grid-template-rows: 3rem 1fr 3rem;
      grid-template-areas:
        '. . .'
        '. center .'
        '. . .';
      background-color: transparent;
    }

    &__aspect-wrapper {
      position: relative;
      top: unset;
    }

    &__header,
    &__footer {
      position: absolute;
      left: 0;
    }

    &__header {
      width: 100%;
    }

    &__content {
      overflow: hidden;
    }

    // (C)
    &.m-lightbox--sequence {
      --width-fix: 22rem;
      --offset-header: -3rem;
      --offset-content: 0;
      --offset-footer: -3rem;
      --footer-height: 3rem;
      --content-height-fix: 0rem;

      // (D)
      &.-extended {
        --width-fix: 27rem;
        --offset-header: -4.5rem;
        --offset-content: -1.5rem;
        --offset-footer: -4.5rem;
        --footer-height: 3rem;
        --content-height-fix: 3rem;

        .m-lightbox__footer {
          display: grid;
        }
      }
    }

    // (B) short caption
    &.-extended {
      --width-fix: 22rem;
      --offset-header: -3rem;
      --offset-content: 0rem;
      --offset-footer: 0rem;
      --footer-height: 0rem;
      --content-height-fix: 3rem;

      .m-lightbox__aspect-wrapper {
        position: relative;
        top: unset;
      }

      figcaption {
        position: absolute;
        display: block;
        height: 3rem;
        max-height: unset;
        top: auto;
        bottom: 0;
      }

      // (B) long caption
      &.-long-caption {
        --width-fix: 27rem;
        --offset-header: -4.5rem;
        --offset-content: -1.5rem;
        --offset-footer: -4.5rem;
        --footer-height: 3rem;
        --content-height-fix: 3rem;

        // open class to move caption up to be readable
        // only needed when height of caption is higher than available space
        // if this is necessary should be determined in JS
        figcaption.-open {
          position: absolute;
          height: auto;
          bottom: 0;
          overflow: visible;
          padding-bottom: 1rem;
        }

        .m-lightbox__footer {
          display: grid;
        }
      }
    }
  }
}