@media screen and (min-width: 0px) {
  #mainImg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      156deg,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(255, 255, 255, 0) 50%,
      rgba(255, 255, 255, 0) 100%
    );
    z-index: 1;
  }
  .foto figure {
    width: 100%;
    object-fit: cover;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: calc(var(--outterRim) / 2);
  }
  .foto img {
    width: 100%;
    height: 100%;
  }
}
/* * * * * * * * * * * tablet malý * * * * * * * * * * */

@media screen and (min-width: 768px) {
  .foto:not(:last-of-type) {
    margin-bottom: 80px;
  }
  /* posun hero */

  .mask img {
    width: 150vw;
  }
  .mask1 img {
    transform: translate(-201px, -152px); /* x=201px y=152px */
    width: 150vw;
  }
  .mask2 img {
    transform: translate(
      -201px,
      calc((-1) * (var(--gridFirstRow) + var(--gridGap) + 152px))
    );
  }
  .mask3 img {
    transform: translate(
      calc((-1) * ((var(--gridFirstColumn) + var(--gridGap) + 201px))),
      calc(
        (-1) *
          (
            var(--gridSecondRow) + var(--gridFirstRow) + (var(--gridGap) * 2) +
              152px
          )
      )
    );
  }
  .mask4 img {
    transform: translate(
      calc(
        (-1) *
          (
            var(--gridSecondColumn) + var(--gridFirstColumn) +
              (2 * var(--gridGap)) + 201px
          )
      ),
      -152px
    );
  }
}

/* * * * * * * * * * * tablet velký, desktop malý * * * * * * * * * * */

@media screen and (min-width: 1024px) {
  /* posun hero */

  .mask1 img {
    transform: translate(-301px, -253px); /* x=301px y=253px */
    width: 150vw;
  }
  .mask2 img {
    transform: translate(
      -301px,
      calc((-1) * (var(--gridFirstRow) + var(--gridGap) + 253px))
    );
  }
  .mask3 img {
    transform: translate(
      calc((-1) * ((var(--gridFirstColumn) + var(--gridGap) + 301px))),
      calc(
        (-1) *
          (
            var(--gridSecondRow) + var(--gridFirstRow) + (var(--gridGap) * 2) +
              253px
          )
      )
    );
  }
  .mask4 img {
    transform: translate(
      calc(
        (-1) *
          (
            var(--gridSecondColumn) + var(--gridFirstColumn) +
              (2 * var(--gridGap)) + 301px
          )
      ),
      -253px
    );
  }
}

/* desktop jen hovery */

@media screen and (min-width: 1024px) and (pointer: fine), (pointer: none) {
}

/* desktop normální */

@media screen and (min-width: 1200px) and (pointer: fine), (pointer: none) {
  /* posun hero */

  .mask1 img {
    transform: translate(-501px, -303px); /* x=501px y=303px */
    width: 150vw;
  }
  .mask2 img {
    transform: translate(
      -501px,
      calc((-1) * (var(--gridFirstRow) + var(--gridGap) + 303px))
    );
  }
  .mask3 img {
    transform: translate(
      calc((-1) * ((var(--gridFirstColumn) + var(--gridGap) + 501px))),
      calc(
        (-1) *
          (
            var(--gridSecondRow) + var(--gridFirstRow) + (var(--gridGap) * 2) +
              303px
          )
      )
    );
  }
  .mask4 img {
    transform: translate(
      calc(
        (-1) *
          (
            var(--gridSecondColumn) + var(--gridFirstColumn) +
              (2 * var(--gridGap)) + 501px
          )
      ),
      -303px
    );
  }
}

/* desktop velký */

@media screen and (min-width: 1600px) and (pointer: fine), (pointer: none) {
}

/* desktop idiot 2500 x 1300 */