.dialog-off-canvas-main-canvas {
  position                  : fixed;
  width                     : 100%;
  height                    : 100%;
  overflow-y                : auto;
  -webkit-overflow-scrolling: touch;
}

.city-tctp {
  container: city-tctp / inline-size;
}

@container city-tctp (min-width: 40em) {
  .city-tctp-elements {
    margin             : 0 auto;
    display            : grid;
    grid-template-areas: "intro main""outro main";
    grid-template-rows : auto 1fr;
    gap                : 0 1.5rem;
  }

  .city-tctp-main> :first-child {
    margin-top: 0;
  }

  .city-tctp-intro>:first-child,
  .city-tctp-outro>:first-child {
    margin-top: 0;
  }
}

.city-tctp-intro {
  grid-area: intro;
}

.city-tctp-intro>*,
.city-tctp-outro>* {
  margin-bottom: 1em;
}

.city-tctp-main {
  grid-area: main;
}

.city-tctp-outro {
  grid-area: outro;
}

.cols_20_80 {
  grid-template-columns: minmax(20%, var(--min-column-width)) auto;
}

.cols_25_75 {
  grid-template-columns: minmax(25%, var(--min-column-width)) auto;
}

.cols_33_66 {
  grid-template-columns: minmax(33%, var(--min-column-width)) auto;
}

.cols_40_60 {
  grid-template-columns: minmax(40%, var(--min-column-width)) auto;
}

.cols_50_50 {
  grid-template-columns: minmax(50%, var(--min-column-width)) auto;
}

@media screen and (min-width: 48rem) {
  .city-twocols {
    display          : grid;
    grid-template    : "before main""before after";
    gap              : var(--margin-xl);
    grid-auto-columns: 30% auto;
  }

  .city-twocols-before {
    grid-area: before;
  }

  .city-twocols-before>:first-child {
    position: sticky;
    top     : calc(var(--margin-md) + var(--main-menu-height));
  }

  .city-twocols-after {
    grid-area: after;
  }

  .city-twocols-main {
    grid-area: main;
  }

  .city-twocols-before:empty {
    display: none;
  }

  .city-twocols-before:empty+.city-twocols-main {
    grid-column: span 2;
  }
}