#ticket-show-details-view {
  border-top-left-radius: var(--sheet-border-radius);
  border-top-right-radius: var(--sheet-border-radius);
  width: 100%;
  max-width: 64rem;
  height: 100%;
  max-height: min(min(80dvh, 100lvh - 0.8rem), 68rem);

  &[shown] {
    transition: none;
  }

  @media (width >= 680px) and (height >= 620px) {
    &:not([hidden]) {
      border-radius: var(--sheet-border-radius);
      translate: 0% calc((100vh - 100%) / -2);
    }
  }


  > main {
    padding-block: 1.8rem;
    display: grid;
    grid-template-columns: auto 1fr;
    align-content: start;


    > * {
      grid-column: 1 / -1;
    }


    .icon {
      grid-column: 1 / 2;
      align-self: center;
      margin-left: 1.8rem;
      margin-right: 0.8rem;
      aspect-ratio: 1 / 1;
      width: 4.8rem;
      height: auto;
    }


    .name {
      grid-column: 2 / 3;
      margin-right: 1.8rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 0.4rem;


      .label {
        font-size: 1.8rem;
        line-height: 1;
        font-weight: 600;
      }


      .date {
        margin-bottom: -0.2rem;
        display: flex;
        flex-wrap: wrap;
        column-gap: 0.3em;
        font-size: 1.4rem;
        color: gray;
        line-height: 1.2;

        > span {
          white-space: nowrap;
        }
      }
    }


    .summary {
      margin-top: 1.2rem;
      margin-inline: 1.8rem;

      &:empty {
        display: none;
      }
    }


    .bullets {
      margin-top: 1.3rem;
      display: flex;
      flex-direction: column;
      gap: 0.6rem;

      &:not(:has(> *:not([hidden]))) {
        display: none;
      }


      > :is(.period, .requirements, .personal-limit) {
        width: fit-content;
        display: flex;
        align-items: center;

        &[hidden] {
          display: none;
        }


        > .icon {
          aspect-ratio: 1 / 1;
          width: 2rem;
          height: auto;

          path {
            fill: currentColor;
          }
        }


        > .label {
          flex: 1 1;
          line-height: 1.4;
        }
      }


      > .period {
        .icon-range-start:is(#ticket-show-details-view:not([data-period="start"]) *),
        .icon-range-end:is(#ticket-show-details-view:not([data-period="end"]) *) {
          display: none;
        }
      }
    }


    .gallery {
      margin-top: 1.8rem;
      margin-bottom: 0.6rem;
      min-width: 0;
      display: flex;
      gap: 1.2rem;
      flex-direction: column;

      &:has(.slides:empty) {
        display: none;
      }


      .slides {
        padding-inline: 1.8rem;
        display: grid;
        column-gap: 1.8rem;
        grid-auto-flow: column;
        grid-auto-columns: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;


        &::-webkit-scrollbar {
          display: none;
        }


        .slide {
          margin: 0;
          scroll-margin: 1.8rem;
          min-width: 0;
          display: flex;
          align-items: center;
          scroll-snap-align: center;
          scroll-snap-stop: always;


          .image {
            border-radius: 1.6rem;
            width: 100%;
            height: auto;
            pointer-events: none;
            -webkit-user-select: none;
            user-select: none;
          }
        }
      }


      .dots {
        align-self: center;
        display: flex;
        gap: 0.8rem;

        &:has(.dot:only-child) {
          display: none;
        }


        .dot {
          border-radius: 100vmax;
          aspect-ratio: 1 / 1;
          width: 0.8rem;
          height: auto;
          display: block;
          cursor: pointer;
          color: inherit;
          background: currentColor;
          opacity: .25;
          transition: opacity 150ms ease;


          @media (hover: hover) and (pointer: fine) {
            &:hover {
              box-shadow:
                0 0 0 0.2rem white,
                0 0 0 0.3rem black;
            }
          }


          &.current {
            opacity: 1;
          }
        }
      }
    }


    .description {
      margin-top: 1.2rem;
      margin-inline: 1.8rem;

      &:empty {
        display: none;
      }


      p {
        &:not(:first-child) {
          margin-top: 1.2rem;
        }

        &:empty {
          margin-top: 2.4rem;
        }

        &.list-item {
          margin-left: 2rem;
          display: list-item;
        }
      }
    }
  }
}