.grid {
  --cols: 1;

  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-template-rows: repeat(var(--grid-rows), 1fr);
  gap: var(--gap);
  width: 100%;
  height: 100%;
  max-width: 1600px;
  margin: 0 auto;
  flex: 1;
}

.card {
  --gc: 1;
  --gcs: 1;
  --gr: auto;
  --grs: 1;

  grid-column: var(--gc) / span var(--gcs);
  grid-row: var(--gr) / span var(--grs);
  position: relative;
  border-radius: var(--radius);
  padding: var(--card-padding);
  overflow: hidden;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  container-type: inline-size;
  will-change: transform;
}

.card:focus-visible {
  outline: 3px solid var(--text);
  outline-offset: 3px;
}

.card:active {
  cursor: grabbing;
}

@media (min-width: 640px) {
  .grid {
    --cols: 2;
  }
}

.grid.layout--accordion {
  display: flex;
  flex-direction: row;
  gap: var(--gap);
  align-items: stretch;
  width: 100%;
  max-width: none;
  overflow: visible;
  grid-template-columns: none;
  grid-template-rows: none;
  transform: translateX(calc(var(--accordion-translate, 0) * -1));
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.grid.layout--accordion--no-transition,
.grid.layout--accordion--no-transition .card,
.grid.layout--accordion--no-transition .card__text,
.grid.layout--accordion--no-transition .card__avatar,
.grid.layout--accordion--no-transition .card__summary,
.grid.layout--accordion--no-transition .card__full,
.grid.layout--accordion--no-transition .card__actions,
.grid.layout--accordion--no-transition .card__list,
.grid.layout--accordion--no-transition .card__accordion-label {
  transition: none !important;
}

.grid.layout--accordion .card {
  flex: 0 0 var(--accordion-collapsed, 84px);
  min-width: var(--accordion-collapsed, 84px);
  max-width: var(--accordion-collapsed, 84px);
  height: 100%;
  transition: flex-basis 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              min-width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              max-width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              padding 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.grid.layout--accordion .card[data-state="expanded"] {
  flex: 0 0 var(--accordion-expanded);
  min-width: var(--accordion-expanded);
  max-width: var(--accordion-expanded);
}

@media (min-width: 1024px) {
  .grid {
    --cols: 4;
  }
}