* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background: #111111;
}

.photo-page {
  position: relative;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #111111;
}

.front-picture {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100dvh;
}

.front-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 767px) {
  .photo-page {
    background-image: linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12)), url("photos/main1.png");
    background-size: cover;
    background-position: center;
  }

  .photo-page::before {
    content: "";
    position: absolute;
    inset: -24px;
    background: inherit;
    filter: blur(18px);
    transform: scale(1.04);
  }

  .front-photo {
    object-fit: contain;
    object-position: top center;
  }
}