.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-intro {
  grid-area: intro;
}

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

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

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

.cols_20_80 {
  grid-template-columns: 20% auto;
}

.cols_25_75 {
  grid-template-columns: 25% auto;
}

.cols_33_66 {
  grid-template-columns: 33% auto;
}

.cols_40_60 {
  grid-template-columns: 40% auto;
}

.cols_50_50 {
  grid-template-columns: 50% auto;
}