.header,
.hgroup {
  display: flex;
  flex-direction: column;
}

.header {
  gap: var(--Spacing-x2);
  grid-area: header;
}

.hgroup {
  gap: var(--Spacing-x-half);
}

.body {
  max-width: 720px;
}

.actions {
  border-radius: var(--Corner-radius-md);
  display: grid;
  grid-area: actions;
  justify-content: flex-start;
}

@media screen and (min-width: 768px) {
  .actions {
    gap: var(--Spacing-x3);
    grid-auto-columns: auto;
    grid-auto-flow: column;
    grid-template-columns: auto;
  }
}

@media screen and (min-width: 1367px) {
  .header {
    padding-bottom: var(--Spacing-x4);
  }
}