/* Tweaks/fixes to 3rd-party Magnific Popup CSS */

body.mfp-active {
  /* lock down bg-scrolling on mobile */

  overflow: hidden;

  .mfp-bg {
    height: 100% !important;
    position: fixed !important;
    overflow: hidden;
  }

  .mfp-wrap {
    top: 0 !important;
    position: fixed !important;
    overflow: auto;
    height: 100% !important;
  }

  /* prevent arrow-alignment bug on mobile */

  .mfp-arrow-left {

    transform-origin: left;
  }

  .mfp-arrow-right {

    transform-origin: right;
  }

  .mfp-bottom-bar .mfp-title {

    padding-right: 3.5rem;
  }

  .mfp-counter {

    font-size: 1rem;

    line-height: 1.5rem;
  }

  .mfp-bottom-bar .mfp-title, .mfp-bottom-bar .mfp-counter {

    margin-top: 0.25rem;
  }

  .mfp-bottom-bar {

    padding-bottom: 1.5rem;
  }

  .mfp-bottom-bar {

    --tw-text-opacity: 1;

    color: rgba(255, 255, 255, var(--tw-text-opacity));
  }

  .mfp-figure {

    position: relative;
  }

  .mfp-figure {
    height: auto;
    max-height: -webkit-max-content;
    max-height: -moz-max-content;
    max-height: max-content;
  }

  .mfp-img {
    height: auto;
    max-height: calc(100vh - (2 * var(--site-border-width, 0px)));
  }

  .mfp-container {
    padding-top: var(--site-border-width);
    padding-bottom: var(--site-border-width);
  }
}