.htha-orientation-archive .htha-container {
  width: min(100% - 48px, 1440px);
}

.htha-collection-header__aside {
  display: grid;
  justify-items: end;
  gap: 12px;
}

.htha-orientation-header__ratio {
  width: min(220px, 100%);
  justify-self: end;
}

.htha-orientation-header__ratio svg {
  display: block;
  width: 100%;
  height: auto;
}

.htha-orientation-header__wall {
  fill: #efe8de;
  stroke: #d7cfc4;
}

.htha-orientation-header__art {
  fill: #c4b39a;
}

.htha-orientation-section {
  padding: var(--htha-space-80) 0;
}

.htha-orientation-section--warm {
  background: #f7f3ed;
}

.htha-orientation-section--tint {
  background: #f0ebe4;
}

.htha-orientation-scenes,
.htha-orientation-sizes,
.htha-orientation-cards,
.htha-orientation-guide {
  display: grid;
  gap: 24px 22px;
}

.htha-orientation-scenes,
.htha-orientation-sizes,
.htha-orientation-guide {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.htha-orientation-cards {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.htha-orientation-cards[data-count="1"],
.htha-orientation-scenes[data-count="1"] {
  grid-template-columns: minmax(240px, 360px);
}

.htha-orientation-cards[data-count="2"],
.htha-orientation-scenes[data-count="2"],
.htha-orientation-sizes[data-count="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 880px;
}

.htha-orientation-scene {
  display: grid;
  gap: 10px;
  text-decoration: none;
  align-content: start;
}

.htha-orientation-scene__media {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--htha-surface);
}

.htha-orientation-scene__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.htha-orientation-scene__title {
  font-size: 18px;
  font-weight: 500;
}

.htha-orientation-scene__text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--htha-text-muted);
}

.htha-orientation-size__diagram {
  background: #faf8f4;
  border: 1px solid var(--htha-border);
  padding: 16px;
  margin-bottom: 16px;
}

.htha-orientation-size__diagram svg {
  display: block;
  width: 100%;
  height: auto;
}

.htha-orientation-size__wall {
  fill: #efe8de;
  stroke: #d7cfc4;
}

.htha-orientation-size__art {
  fill: #c4b39a;
}

.htha-orientation-size h3,
.htha-orientation-guide__item h3 {
  font-size: 18px;
  margin: 0 0 8px;
}

.htha-orientation-size p,
.htha-orientation-guide__item p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--htha-text-muted);
}

.htha-orientation-discovery {
  padding-top: var(--htha-space-64);
}

.htha-orientation-archive .htha-collection-chip.is-active {
  background: var(--htha-dark);
  color: #fff;
  border-color: var(--htha-dark);
}

@media (max-width: 1023px) {
  .htha-orientation-archive .htha-container {
    width: min(100% - 32px, 1440px);
  }
  .htha-orientation-scenes,
  .htha-orientation-sizes,
  .htha-orientation-cards,
  .htha-orientation-guide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .htha-orientation-section {
    padding: var(--htha-space-64) 0;
  }
}

@media (max-width: 767px) {
  .htha-orientation-guide {
    grid-template-columns: 1fr;
  }
  .htha-orientation-sizes {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
  }
  .htha-orientation-sizes > * {
    flex: 0 0 min(78%, 260px);
    scroll-snap-align: start;
  }
}