src/components/deck-display/deck-display.module.css
.main {
  column-gap: 1.5rem;
  row-gap: 0.5rem;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: min-content min-content min-content;
  grid-template-areas:
    "header"
    "sidebar"
    "decklist";

  padding-bottom: 1rem;

  @media screen and (min-width: 52rem) {
    grid-template-columns: 24rem 1fr;
    grid-template-areas:
      "sidebar header"
      "sidebar decklist";
    grid-template-rows: min-content 1fr;
  }
}

.sidebar {
  grid-area: sidebar;
}

.header {
  grid-area: header;
}

.header > * + * {
  margin-top: 0.5rem;
}

.banner {
  position: relative;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.content {
  grid-area: decklist;
  padding-block: 0.375rem;
  min-width: 0;
}

.tabs {
  display: flex;
  flex-flow: column nowrap;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  position: relative;
}

.list {
  position: sticky;
  top: 0;
  background-color: var(--palette-0);
  z-index: 2;
}

.tab {
  flex: 1 1 auto;
  padding: 0.5rem 0;
  height: 100%;
  min-height: 0;
  min-height: 15rem;
}

.tab-content > * + * {
  margin-top: 0.375rem;
}

.name-modal-trigger {
  display: flex;
  align-items: first baseline;
  gap: 0.375rem;
  justify-content: flex-start;
  background: none;
  text-align: left;
  user-select: auto;
}

.name-modal-icon {
  flex: 0 0 auto;
  font-size: var(--icon-sm);
  opacity: 0.5;
  transition: opacity 0.15s ease-in-out;
}

.name-modal-trigger:hover .name-modal-icon {
  opacity: 1;
}

.name-modal-footer {
  display: flex;
  flex-flow: row nowrap;
  gap: 0.375rem;
  margin-top: 0.375rem;
}

.main:not(.local) .sidebar-inner {
  position: sticky;
  top: 0.125rem;
}
