.lightbox {
  z-index: 9999;
  background: #000c;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  overflow-y: auto
}

.lightbox .lb-img {
  object-fit: contain;
  max-width: 90vw;
  max-height: 90vh;
  margin: 0 auto 1rem;
  display: block
}

.lightbox .lb-close {
  cursor: pointer;
  background: 0 0;
  border: 0;
  padding: 0
}

.lightbox .lb-close,
.modal .close-modal,
.modal-overlay {
  justify-content: center;
  align-items: center;
  display: flex
}

.modal .close-modal {
  cursor: pointer;
  background: 0 0;
  border: 0;
  width: 2rem;
  height: 2rem;
  padding: 0;
  font-family: Brush Script MT, cursive
}

.lightbox .lb-close {
  top: var(--spacing);
  right: var(--spacingDouble);
  color: #fff;
  z-index: 10001;
  width: 3rem;
  height: 3rem;
  text-shadow: var(--text-stroke);
  font-size: 3rem;
  position: fixed
}

.modal-overlay {
  z-index: 10000;
  overscroll-behavior: contain;
  background: #000c;
  position: fixed;
  inset: 0;
  overflow-y: auto
}

.modal {
  padding: var(--spacing);
  border-radius: var(--radius);
  overscroll-behavior: contain;
  text-align: left;
  background: #fff;
  width: 90%;
  max-width: 45rem;
  max-height: 90vh;
  position: relative;
  overflow-y: auto
}

.modal .close-modal {
  margin: var(--spacingHalf);
  color: var(--color-text);
  position: absolute;
  top: 0;
  right: 0
}

.lightbox .lb-close:hover,
.modal .close-modal:hover {
  color: var(--color-error)
}

.modal h2 {
  text-align: left;
  margin-top: 0;
  margin-bottom: var(--spacing)
}

.details-heading {
  margin-top: var(--spacingDouble);
  margin-left: var(--spacingHalf);
  justify-content: space-between;
  align-items: center;
  display: flex
}

.details-heading h3 {
  margin: 0
}

#messageToast {
  text-align: center;
  min-width: 12rem
}

.main-photo {
  object-fit: cover;
  border-radius: var(--radius);
  width: 100%;
  height: 23rem;
  box-shadow: 0 1px 4px #0000001a
}

.photo-header {
  justify-content: space-between;
  align-items: center;
  margin-bottom: .5rem;
  display: flex
}

.photo-header a {
  align-items: center;
  gap: .25rem;
  display: inline-flex
}

.photo-header .share-link {
  margin-left: auto
}

.photo-header .share-link span {
  white-space: nowrap;
  display: inline-block
}

.preview-container {
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin-top: .5rem;
  display: flex
}

.preview-box img {
  object-fit: cover;
  border: 1px solid #ccc;
  width: 100px;
  height: 100px
}

.preview-box {
  position: relative
}

h3 {
  margin-top: var(--spacingDouble);
  margin-left: var(--spacingHalf)
}

#map,
.preview-box img,
.preview-overlay {
  border-radius: var(--radius)
}

.preview-overlay {
  color: #fff;
  cursor: pointer;
  background: #00000080;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  display: flex;
  position: absolute;
  inset: 0
}

.desc {
  text-align: justify;
  background: #fafafa;
  border-left: 2px solid #e5e5e5;
  padding-left: .75rem
}

.desc,
.details {
  margin-top: var(--spacing)
}

.details h2 {
  margin-bottom: 10px;
  font-size: 1.5rem
}

.details dl {
  border-top: none;
  grid-template-columns: max-content 1fr;
  gap: 0;
  display: grid
}

.details dd,
.details dt {
  border-bottom: 1px solid var(--color-border);
  padding: .5rem
}

.details dt {
  padding-right: 1rem;
  font-weight: 600
}

.details dd {
  margin: 0
}

.details strong {
  color: #444
}

#map {
  width: 100%;
  height: 30rem;
  box-shadow: 0 1px 4px #0000001a
}

@media (orientation:portrait) {
  .modal {
    width: 99%
  }

  .lightbox .lb-close {
    top: var(--spacing);
    right: var(--spacing);
    width: 2rem;
    height: 2rem;
    font-size: 1.5rem
  }

  #map {
    height: 20rem
  }
}

.modal .close-modal:before {
  content: "";
  background-color: currentColor;
  width: 100%;
  height: 100%;
  -webkit-mask: url(/img/icons/x.svg) 50%/contain no-repeat;
  mask: url(/img/icons/x.svg) 50%/contain no-repeat
}

.details dd:last-of-type,
.details dt:last-of-type {
  border-bottom: none
}

html {
  scroll-behavior: smooth
}

.mapMarker {
  background: var(--color-primary);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative
}

.mapMarker:after {
  content: "";
  border-top: 6px solid var(--color-primary);
  border-left: 6px solid #0000;
  border-right: 6px solid #0000;
  width: 0;
  height: 0;
  position: absolute;
  bottom: -3px;
  left: 50%;
  transform: translate(-50%)
}

.mapMarker .mapIcon {
  color: #fff;
  width: 80%;
  height: 80%;
  position: relative;
  top: -1px
}

.details-group {
  text-align: left
}

.lb-container {
  max-width: 90vw;
  position: relative
}

#firstMessage {
  min-height: 8rem
}