body {
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
  background-color: #351237;
  z-index: -2;
  display: grid;
  place-content: center;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 2fr;
}

body > img {
  position: absolute;
  inset: 0 0 0 0;
  height: 100%;
  aspect-ratio: 1533/1051;
  padding: 0;
  z-index: -1;
  margin-inline: auto;
}

#place-title {
  grid-column: 1/2;
  grid-row: 1/2;
  display: flex;
  justify-content: space-evenly;
}
#place-title * {
  margin-block: auto;
  color: #fff;
}

.More-details {
  grid-column: 3/4;
  cursor: pointer;
  height: -moz-fit-content;
  height: fit-content;
  width: -moz-fit-content;
  width: fit-content;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  place-content: center;
}
.More-details * {
  color: #fff;
  margin: 0;
}
.More-details > h2 {
  grid-row: 1/2;
  grid-column: 1/2;
  transform: translateY(50%);
  font-size: 48px;
}
.More-details span.circle {
  width: 47px;
  height: 47px;
  border-radius: 50%;
  border: #fff solid 1px;
  grid-row: 2/3;
  grid-column: 2/3;
  margin-left: auto;
  transform: translate3d(5%, 20%, 0);
}
.More-details > img {
  grid-row: 2/3;
  grid-column: 1/3;
  margin: auto;
}

Section {
  position: absolute;
  top: 0;
  left: 100vw;
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  padding: 2ch 4.5ch;
  display: grid;
  gap: 1ch;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 0.5fr 1fr 1fr 1fr 2fr;
  overflow-y: hidden;
}

Section.Toggle-ON {
  animation: slide 500ms ease-in forwards;
}

@keyframes slide {
  from {
    left: 100vw;
  }
  to {
    left: 0;
  }
}
@keyframes slideBack {
  from {
    left: 0;
  }
  to {
    left: 100vw;
  }
}
Section.Toggle-OFF {
  animation: slideBack 500ms ease-in forwards;
}

Section .info {
  cursor: pointer;
  grid-column: 1/2;
  color: #000;
  border-top: dashed #000 4px;
  padding-block: 2ch;
}
Section .info > div {
  display: flex;
  justify-content: space-between;
}
Section .info > div h1 {
  font-size: 36px;
  margin-left: 5ch;
}
Section .info p {
  overflow-y: hidden;
  transition: opacity ease-in 500ms, height ease-in-out 1000ms;
  opacity: 0;
  height: 0px;
  text-align: justify;
}
Section .info#general-info > p {
  display: block;
  text-align: justify;
}

.sideImg {
  grid-column: 2/3;
  grid-row: 1/4;
}
.sideImg > img {
  width: 100%;
}/*# sourceMappingURL=place.css.map */