:root {
  --imageGap: 0.7%;
  --imageGapNonMobile: 0.7%;
  --imageGapNoPercentage: 0.7;
  /*--imageGapCalculated: 0.65dvw;*/
  --imageContainerPadding: .1%;
  --imageContainerPaddingNoPercentage: 1;
  /*--imageGapCalculated: calc((100dvw - ((var(--imageGapNoPercentage) / 100) * 2) - ((var(--imageContainerPaddingNoPercentage) / 100) * 2)) * (var(--imageGapNoPercentage) / 100));*/
  --imageGapCalculated: calc(((100dvw - ((100dvw * var(--imageGapNoPercentage) / 100) * 2)) * (1 - var(--imageContainerPaddingNoPercentage) / 100 * 2)) * (var(--imageGapNoPercentage) / 100));
  --defaultImageHeight: clamp(100px, calc(100dvh/2.5 + 50px), 90dvh);
  --controlledPortraitImageHeight: clamp(100px, calc(100dvh/1.9 + 50px), 90dvh);
  --fadeInDelay: 0s;
}

/*General Image Styles Start*/

.imageContainer {
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 15px;
  margin: 50px auto 0 auto;
  padding: 0 var(--imageContainerPadding);
  box-sizing: border-box;
  transition: opacity 0.2s;
  visibility: visible;
}

.imageContainerHidden {
  opacity: 0;
  visibility: hidden;
}

.imageContainer > div {
  width: 100%;
}

.imageContainer button {
  all: unset;
  cursor: pointer;
  transition: filter 0.2s;
  max-width: 100%;
  height: unset;
  position: relative;
  z-index: 0;
}

.imageContainer button::after {
  content: "";
  background-color: rgba(0, 0, 0, 0.001);
  position: absolute;
  inset: 0;
  display: flex;
  z-index: 1;
}

.imageContainer button:hover,
.imageContainer button:focus-visible {
  filter: brightness(1.05);
}

.imageContainer button:focus-visible {
  outline: var(--focusColor) solid var(--focusSize);
  outline-offset: var(--focusOffset);
}

.imageContainer button:active {
  filter: brightness(1.1);
}

.imageContainer button img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease var(--fadeInDelay);
}

/*General Image Styles End*/

/*General Toggles Start*/

.nonMobileImageRow {
  display: flex !important;
}

.mobileImageRow {
  display: none !important;
}

.largeImage {
  grid-column: span 2 !important;
  margin: 0 auto !important;
}

.thinImage {
  aspect-ratio: 6/13;
}

.largeImage.thinImage {
  aspect-ratio: unset !important;
}

.noCrop {
  object-fit: scale-down !important;
}

.imageVisible {
  opacity: 1 !important;
}

/*General Toggles End*/

/*Image Positioning Start*/

.focalTopCenter {
  object-position: top center;
}

.focalTopLeft {
  object-position: top left;
}

.focalTopRight {
  object-position: top right;
}

.focalCenter {
  object-position: center;
}

.focalCenterLeft {
  object-position: left;
}

.focalCenterRight {
  object-position: right;
}

.focalBottomCenter {
  object-position: bottom center;
}

.focalBottomLeft {
  object-position: bottom left;
}

.focalBottomRight {
  object-position: bottom right;
}

/*Image Positioning End*/

/*Image Rows Start*/

  /*Normal Image Row Start*/
    .normalImageRow {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: flex-start;
      gap: var(--imageGap);
      flex-wrap: nowrap;
      width: 100%;
    }

    .normalImageRow button img {
      max-height: var(--defaultImageHeight) !important;
    }
  /*Normal Image Row End*/

  /*Controlled Portrait Image Row Start*/
    .controlledPortraitImageRow {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: flex-start;
      gap: var(--imageGap);
      flex-wrap: nowrap;
      width: 100%;
      margin: 0;
    }

    .controlledPortraitImageRow button {
      height: var(--controlledPortraitImageHeight) !important;
    }
  /*Controlled Portrait Image Row End*/

  /*Puzzle Image Row Start*/
    .puzzleImageRow {
      display: flex;
      flex-direction: row;
      gap: var(--imageGap);
      width: 100% !important;
    }

    .puzzleImageRow button {
      width: 100%;
    }

    .puzzleImageRowCenter {
      display: grid;
      grid-template-columns: auto;
      gap: var(--imageGapCalculated);
    }

    .puzzleImageRowCenter button {
      width: 100% !important;
    }

    .puzzleImageRowCenter button:has(.thinImage) {
      aspect-ratio: 6/13;
    }

    .nonMobileImageRow > .puzzleImageRowCenter img {
      width: 100% !important;
      object-fit: cover;
    }

  /*Puzzle Image Row End*/

  /*Image Towers Row Start*/
    .imageTowersRow {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: flex-start;
      gap: var(--imageGap);
      flex-wrap: nowrap;
      width: 100%;
      margin: 0;
      /*padding: 0 2.5%;
      box-sizing: border-box;*/
    }

    .imageTowersRow > div {
      flex: 1 !important;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      gap: var(--imageGapCalculated);
    }

    .imageTowersRow button,
    .imageTowersRow img {
      width: 100% !important;
    }

  /*Image Towers Row End*/

  /*Javascript Integration Start*/

    .forceFullWidth button,
    .carryOver button {
      height: fit-content !important;
      width: 100px !important;
    }

    .forceFullWidth button img,
    .carryOver button img {
      height: auto !important;
      max-height: unset !important;
      width: 100% !important;
    }

  /*Javascript Integration End*/

/*Image Rows End*/

  @media (max-width: 950px) AND (orientation: portrait) {
    :root {
      --controlledPortraitImageHeight: clamp(100px, calc(100dvh/5 + 50px), 2000px);
    }
  }

  @media (max-width: 950px) {

    /*Large Mobile General Image Styles Start*/

      .imageContainer {
        margin: 5px 0 0 0;
        padding: 0;
      }

    /*Large Mobile General Image Styles End*/

    /*Large Mobile Image Rows Start*/

      /*Large Mobile Normal Image Row Start*/

        .normalImageRow.mobileImageRow {
          width: 100% !important;
        }

      /*Large Mobile Normal Image Row End*/

      /*Large Mobile Image Towers Row Start*/
        /*.imageTowersRow {
          padding: 0;
        }*/
      /*Large Mobile Image Towers Row End*/


    /*Large Mobile Image Rows End*/

  }

  @media (max-width: 720px) AND (orientation: portrait) {
    :root {
      --controlledPortraitImageHeight: clamp(100px, calc(100dvh/4 + 50px), 2000px);
    }
  }

  @media (max-width: 720px) {

    :root {
      --imageGap: 5px;
    }

    .imageContainer {
        gap: var(--imageGap);
      }

    /*General Toggles Start*/

      .nonMobileImageRow {
        display: none !important;
      }

      .mobileImageRow {
        display: flex !important;
      }

    /*General Toggles End*/

    /*Small Mobile Image Rows Start*/
      /*Small Normal Image Row Start*/
        .normalImageRow.mobileImageRow {
          display: grid !important;
          grid-template-columns: 1fr 1fr;
          justify-content: center;
        }

        .normalImageRow.mobileImageRow button {
          height: 100% !important;
        }

        .normalImageRow button img {
          max-height: unset !important;
          width: 100%;
        }
      /*Small Normal Image Row End*/

      /*Small Mobile Controlled Portrait Image Row Start*/
        .controlledPortraitImageRow.mobileImageRow {
          display: grid !important;
          grid-template-columns: 1fr 1fr;
        }

        .controlledPortraitImageRow button {
          width: 100% !important;
        }

        .controlledPortraitImageRow .largeImage {
          width: 100% !important;
          height: fit-content !important;
        }

        .controlledPortraitImageRow .largeImage img {
          height: auto !important;
          max-height: var(--controlledPortraitImageHeight);
        }

        .controlledPortraitImageRow img {
          width: 100% !important;
        }
      /*Small Mobile Controlled Portrait Image Row End*/

      /*Small Puzzle Image Row Start*/
        .puzzleImageRow:not(.nonMobileImageRow) {
          display: grid !important;
          grid-template-columns: 1fr 1fr;
        }

        .puzzleImageRow button {
          width: 100% !important;
          height: 100% !important;
        }

        .puzzleImageRow img {
          width: 100% !important;
          min-height: 100% !important;
          height: auto !important;
          max-width: unset !important;
          max-height: var(--defaultImageHeight) !important;
          object-position: top center;
        }
      /*Small Puzzle Image Row End*/

      /*Small Image Towers Start*/

      .imageTowersRow > div {
        gap: var(--imageGap);
      }


      /*Small Image Towers End*/

    /*Small Mobile Image Rows End*/
  }

  @media (prefers-reduced-motion: reduce) {
    .imageContainer {
      transition: opacity 0.2s linear;
    }

    .imageContainer button {
      transition: filter 0.2s linear !important;
    }

    .imageContainer button img {
      opacity: 1;
      transition: none;
    }

  }