html:has(.together),
body:has(.together) {
  overflow-x: hidden;
}

.together {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--base-unit);
}
.together__window {
  box-shadow: 0 0 var(--base-unit--s) rgba(0, 0, 0, 0.25);
  max-width: 100%;
  display: grid;
  grid-template-rows: 64px 1fr 64px;
  transform-origin: left top;
  overflow: hidden;
}
.together__window.mobile {
  grid-template-rows: 32px 1fr 32px;
}
.together iframe {
  border: 0;
  width: 100%;
  height: 100%;
}
.together .mobile.portrait {
  width: 360px;
  aspect-ratio: 36/64;
}
.together .mobile.landscape {
  width: 640px;
  aspect-ratio: 64/36;
}
.together .small.portrait {
  aspect-ratio: 2/3;
  width: 480px;
}
.together .small.landscape {
  aspect-ratio: 3/2;
  width: 640px;
}
.together .medium.portrait {
  aspect-ratio: 2/3;
  width: 640px;
}
.together .medium.landscape {
  aspect-ratio: 3/2;
  width: 800px;
}
.together .large.portrait {
  aspect-ratio: 2/3;
  width: 800px;
}
.together .large.landscape {
  aspect-ratio: 3/2;
  width: 1280px;
}
.together .desktop {
  aspect-ratio: 3/2;
  width: 1920px;
}

.chrome {
  display: flex;
  justify-content: end;
  align-items: center;
  background-color: #f3f3f3;
  font-size: 0.5em;
  padding: var(--base-unit--s);
  color: silver;
  text-transform: uppercase;
  height: 64px;
}
.mobile .chrome {
  height: 32px;
}

/*# sourceMappingURL=together.css.map */