.hero__tour {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  justify-content: center;
}

.hero__tour .button {
  box-shadow: var(--box-shadow-intro);
}

.hero__or {
  color: oklch(var(--oklch-ink) / 0.7);
  flex: none;
  font-size: var(--font-size-xxx-small);
  font-style: italic;
  font-weight: 400;
  letter-spacing: var(--letter-spacing);
  line-height: 1;
}

.hero__tour-button {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 0.3em;
  text-align: left;
}

.hero__tour-button figure {
  aspect-ratio: 16 / 9;
  display: grid;
  flex: none;
  font-size: var(--font-size-small);
  height: 2.6em;
  overflow: clip;
  place-items: center;
  position: relative;
}

.hero__tour-button figure img {
  aspect-ratio: 16 / 9;
  display: block;
  grid-area: 1 / 1;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.hero__tour-button figure:after {
  background-size: 0.6875em auto;
  height: 1.25em;
  width: 1.25em;
}

.hero__tour-button div {
  display: grid;
  gap: 0.1em;
}

.hero__tour-button strong {
  color: var(--color-ink);
  font-size: var(--font-size-x-small);
  font-weight: 500;
  letter-spacing: var(--letter-spacing);
  line-height: var(--line-height-xx-tight);
}

.hero__tour-button span {
  color: oklch(var(--oklch-ink) / 0.85);
  font-size: var(--font-size-xx-small);
  font-weight: 400;
  letter-spacing: var(--letter-spacing);
  line-height: var(--line-height-xx-tight);
}

@media(max-width: 24.9375em) {

  .hero__or {
    display: none;
  }

}

@media(min-width: 64em) {

  .hero__tour {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  .hero__tour .button {
    flex: none;
  }

}