.card {
  composes: surface from "material.module.css";
  border-radius: 2px;
  box-shadow: var(--tutu-shadow-e2);
  transition: var(--tutu-transition-shadow);
  overflow: hidden;
  background-color: var(--tutu-color-surface-l);

  &:focus-within,
  &:focus-visible {
    box-shadow: var(--tutu-shadow-e8);
  }

  &:not(.manualMargin) {
    & > :not(.cardNoPad) {
      margin-inline: var(--card-pad, 20px);
    }

    > :not(.cardGutSkip):first-child {
      margin-top: var(--card-gut, 20px);
    }

    > .cardGutSkip + *:not(.cardGutSkip) {
      margin-top: var(--card-gut, 20px);
    }

    > :not(.cardGutSkip):last-child {
      margin-bottom: var(--card-gut, 20px);
    }
  }
}

.layoutCentered {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 448px;

  @media (max-width: 600px) {
    & {
      position: static;
      height: 100%;
      width: 100%;
      left: 0;
      right: 0;
      transform: none;
      display: grid;
      grid-template-rows: 1fr auto;
      height: 100vh;
      overflow: auto;
    }
  }
}