:root {
  --border-radius: 10px;
}

.header_img img {
  width: 100vw;
  height: auto;
}

.urnen {
  width: 100%;
}
@media (min-width: 768px) {
  .urnen {
    width: initial;
    max-width: var(--page-width-large);
  }
}

@media (hover: hover) {
  .urnen a > img {
    cursor: pointer;
    transition: scale 0.3s;
  }
  .urnen a > img:hover {
    scale: 1.2;
  }
}

.boxcontainer {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.boxcontainer-flex-start {
  flex-wrap: wrap-reverse;
  flex-direction: column-reverse;
  align-items: center;
}
@media (min-width: 768px) {
  .boxcontainer {
    flex-direction: initial;
    align-items: baseline;
    margin: 150px 30px;
  }
}

.boxcontainer-flex-end {
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
}
@media (min-width: 768px) {
  .boxcontainer-flex-end {
    flex-direction: initial;
    align-items: baseline;
  }
}

.box {
  position: initial;
  height: 200px;

  flex-shrink: 0;
  margin: 0;
  padding: 2px;
  border-radius: calc(var(--border-radius) + 2px);

  box-shadow: rgb(55 55 197 / 25%) 0px 20px 20px -20px,
    rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}

.box img {
  display: block;
  border-radius: var(--border-radius);
}

main {
  padding: 0 !important;
}
main > * {
  padding: var(--spacing-small) !important;
}
main > .urnen {
  padding: 0 !important;
}

.outerbox {
  width: 100%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-small);
  padding: var(--spacing-large);
  background-color: rgb(19, 30, 34);
  overflow-x: auto;
  overflow-y: hidden;
  margin-block: var(--spacing-large);
  box-shadow: rgba(0, 0, 0, 0.3) 0px 30px 60px -30px inset,
    rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}

@media (min-width: 768px) {
  .outerbox {
    position: relative;

    width: 700px;
    height: 700px;
    display: flex;

    justify-content: left;
    border-radius: 10px;
    background-color: unset;
    flex-wrap: wrap;

    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
      rgba(0, 0, 0, 0.3) 0px 30px 60px -30px,
      rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  }

  .box {
    position: absolute;
    margin: 0;
    overflow: hidden;
  }
}

.art-card {
  flex-shrink: 0;
  margin: calc(var(--spacing-large) * 2) var(--spacing-small) 0;
  padding: 1px;
  border-radius: 4px;
  box-shadow: rgb(55 55 197 / 25%) 0px 20px 17px -20px,
    rgb(0 0 0 / 50%) 0px 11px 14px 0px;
  overflow: hidden;
}

.art-card img {
  max-height: 151pt;
  display: block;
  border-radius: 3px;
}

.pics {
  /*
   * Safari/iOS has issues with the styles of images on mobile.
   * We need to set the image to `width: initial`, but that only
   * works if the image has been pre-loaded. So all the related
   * img tags need additional tags like
   * `<link rel="preload" href="img/urnen/urne1.jpg" as="image" />`
   */
  width: initial;
  min-width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery1pics {
  object-fit: cover;
}
.gallery2pics {
  object-fit: cover;
}
.gallery5pics {
  object-fit: cover;
}
.gallery6pics {
  object-fit: cover;
}
.gallery7pics {
  object-fit: cover;
}
.gallery8pics {
  object-fit: cover;
}

@media (min-width: 768px) {
  .box1_1 {
    top: 30px;
    left: 70px;
    width: 300px;
    height: 200px;
  }

  .box1_2 {
    top: 30px;
    right: 80px;
    width: 225px;
    height: 640px;
  }

  .box1_3 {
    bottom: 30px;
    left: 70px;
    width: 300px;
    height: 200px;
  }

  .box1_4 {
    bottom: 250px;
    left: 70px;
    width: 300px;
    height: 200px;
  }

  .box2_3 {
    top: 30px;
    right: 110px;
    width: 460px;
    height: 330px;
  }

  .box2_1 {
    right: 110px;
    bottom: 30px;
    width: 225px;
    height: 300px;
  }

  .box2_2 {
    bottom: 30px;
    left: 130px;
    width: 225px;
    height: 300px;
  }

  .box3_1 {
    right: 45px;
    bottom: 25px;
    width: 300px;
    height: 225px;
  }

  .box3_2 {
    bottom: 25px;
    left: 45px;
    width: 300px;
    height: 225px;
  }

  .box3_3 {
    right: 45px;
    bottom: 25px;
    width: 300px;
    height: 225px;
  }

  .box3_4 {
    bottom: 25px;
    left: 45px;
    width: 300px;
    height: 225px;
  }

  .box3_5 {
    top: 15px;
    left: 75px;
    width: 550px;
    height: 412.5px;
  }

  .box4_3 {
    right: 45px;
    bottom: 25px;
    width: 300px;
    height: 225px;
  }

  .box4_1 {
    bottom: 25px;
    left: 45px;
    width: 300px;
    height: 225px;
  }

  .box4_2 {
    top: 15px;
    left: 75px;
    width: 550px;
    height: 412.5px;
  }

  .box5_1 {
    top: 35px;
    right: 30px;
    width: 315px;
    height: 350px;
  }

  .box5_2 {
    right: 90px;
    bottom: 50px;
    width: 255px;
    height: 255px;
  }

  .box5_3 {
    bottom: 35px;
    left: 30px;
    width: 315px;
    height: 350px;
  }

  .box5_4 {
    top: 50px;
    left: 90px;
    width: 255px;
    height: 255px;
  }

  .box6_1 {
    top: 30px;
    right: 30px;
    width: 230px;
    height: 400px;
  }

  .box6_2 {
    right: 30px;
    bottom: 30px;
    width: 270px;
    height: 230px;
  }

  .box6_3 {
    bottom: 30px;
    left: 30px;
    width: 360px;
    height: 230px;
  }

  .box6_4 {
    top: 30px;
    left: 30px;
    width: 400px;
    height: 400px;
  }

  .box7_1 {
    bottom: 30px;
    left: 30px;
    width: 230px;
    height: 400px;
  }

  .box7_2 {
    top: 30px;
    left: 30px;
    width: 270px;
    height: 230px;
  }

  .box7_3 {
    top: 30px;
    right: 30px;
    width: 360px;
    height: 230px;
  }

  .box7_4 {
    right: 30px;
    bottom: 30px;
    width: 400px;
    height: 400px;
  }

  .box8_1 {
    top: 25px;
    right: 45px;
    width: 300px;
    height: 225px;
  }

  .box8_2 {
    top: 25px;
    left: 45px;
    width: 300px;
    height: 225px;
  }

  .box8_3 {
    top: 25px;
    right: 45px;
    width: 300px;
    height: 225px;
  }

  .box8_4 {
    bottom: 30px;
    left: 45px;
    width: 610px;
    height: 404px;
  }
}