.shots {
  position: absolute;
  width: 1265px;
  height: 345px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000000 206px, rgba(0, 0, 0, 0) 345px);
  mask-image: linear-gradient(to bottom, #000000 206px, rgba(0, 0, 0, 0) 345px);
}

.shots-short {
  height: 214px;
  -webkit-mask-image: linear-gradient(to bottom, #000000 75px, rgba(0, 0, 0, 0) 214px);
  mask-image: linear-gradient(to bottom, #000000 75px, rgba(0, 0, 0, 0) 214px);
}

.shots-back {
  position: absolute;
  left: 0;
  top: 63px;
  width: 1165px;
  height: 655px;
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-screenshot);
}

.shots-side {
  width: 1277px;
  height: 1953px;
}

.shots-main {
  position: absolute;
  left: 86px;
  top: 0;
  width: 1168px;
  height: 657px;
  background: var(--color-background);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-screenshot);
}

.shots-swapped {
  height: 437px;
  -webkit-mask-image: none;
  mask-image: none;
}

.shots-under {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1168px;
  height: 657px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-screenshot);
}

.shots-over {
  position: absolute;
  left: 87px;
  top: 18px;
  width: 1165px;
  height: 655px;
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-screenshot);
}

.shots-page {
  width: 1277px;
  height: 1953px;
}

@media (max-width: 1439px) {
  .shots {
    position: relative;
    width: 100%;
    max-width: var(--page-max);
    height: auto;
    aspect-ratio: 1366 / 320;
    margin: 0 auto;
    -webkit-mask-image: linear-gradient(to bottom, #000000 62%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom, #000000 62%, rgba(0, 0, 0, 0) 100%);
  }

  .shots-short {
    height: auto;
    aspect-ratio: 1366 / 220;
    -webkit-mask-image: linear-gradient(to bottom, #000000 36%, rgba(0, 0, 0, 0) 98%);
    mask-image: linear-gradient(to bottom, #000000 36%, rgba(0, 0, 0, 0) 98%);
  }

  .shots-back {
    position: static;
    width: 92%;
    height: auto;
    aspect-ratio: 1258 / 707;
    margin-top: 5%;
  }

  .shots-side {
    width: 110%;
    height: auto;
    aspect-ratio: 1379 / 2109;
  }

  .shots-swapped {
    height: auto;
    aspect-ratio: 650 / 437;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .shots-under {
    left: 0;
    top: 20.4%;
    width: 92.4%;
    height: auto;
    aspect-ratio: 1262 / 710;
  }

  .shots-over {
    left: 6.8%;
    top: 4.1%;
    width: 92%;
    height: auto;
    aspect-ratio: 1258 / 707;
  }

  .shots-page {
    width: 110%;
    height: auto;
    aspect-ratio: 1379 / 2109;
  }

  .shots-main {
    left: 6.8%;
    top: 0;
    width: 92.4%;
    height: auto;
    aspect-ratio: 1262 / 710;
  }
}

@media (max-width: 640px) {
  .shots {
    aspect-ratio: 1366 / 600;
    -webkit-mask-image: linear-gradient(to bottom, #000000 78%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom, #000000 78%, rgba(0, 0, 0, 0) 100%);
  }

  .shots-short {
    aspect-ratio: 1366 / 430;
    -webkit-mask-image: linear-gradient(to bottom, #000000 62%, rgba(0, 0, 0, 0) 98%);
    mask-image: linear-gradient(to bottom, #000000 62%, rgba(0, 0, 0, 0) 98%);
  }

  .shots-swapped {
    aspect-ratio: 650 / 437;
    -webkit-mask-image: none;
    mask-image: none;
  }
}