body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.body {
  display: flex;
  flex-direction: column;
  padding: 1rem 1rem 5rem 1rem;
  gap: 2rem;
  position: relative;

  & .body__nav {
    z-index: 1;
    & .body__nav__list {
      padding: 0;
      list-style-type: none;

      li {
        text-wrap: nowrap;
        cursor: pointer;

        a {
          text-decoration: none;

          &:target,
          &:hover {
            text-decoration: underline;
          }
        }
      }

      & .body__nav__list__item {
        cursor: pointer;
      }

      & .body__nav__list__sublist {
        list-style-type: none;
        padding-left: 1rem;
      }
    }
  }

  & .body__center {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    & .body__center__gallery {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 1rem;
      position: relative;
      min-height: 400px;

      & .body__center__gallery__images {
        display: flex;
        justify-content: center;
        & img {
          max-width: 100%;
          height: auto;
          max-height: 400px;
        }

        & .hidden-picture {
          position: absolute;
          width: 1px;
          height: 1px;
          visibility: hidden;
          z-index: -1;
          top: 0;
          left: 0;
        }
      }

      & .body__center__gallery__controls {
        position: absolute;
        bottom: -4rem;
        left: 50%;
        transform: translate(-50%, 0);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 2rem;

        & .body__center__gallery__controls__button {
          background: none;
          border: none;
          box-shadow: none;
          font-size: 1.5rem;
          padding: 0;
          height: 2rem;
          width: 2rem;
          display: flex;
          align-items: center;
          justify-content: center;

          & img {
            height: 1rem;
          }
        }

        & .body__center__gallery__controls__text {
          text-wrap: nowrap;
        }
      }
    }
  }
}

@media only screen and (min-width: 640px) {
  .body {
    & .body__center {
      & .body__center__gallery {
        & .body__center__gallery__images {
          & img {
            max-height: 500px;
          }
        }
      }
    }
  }
}

@media only screen and (min-width: 1024px) {
  .body {
    flex-direction: row;
    margin: auto 0;

    & .body__center {
      & .body__center__gallery {
        justify-content: unset;
        & .body__center__gallery__images {
          & img {
            max-height: 550px;
            max-width: 1000px;
          }
        }
      }
    }
  }
}

@media only screen and (min-width: 1400px) {
  .body {
    & .body__nav {
      position: absolute;
    }
    & .body__center {
      & .body__center__gallery {
        & .body__center__gallery__images {
          & img {
            max-height: 650px;
            max-width: 1100px;
          }
        }
      }
    }
  }
}