:host {
  display: block;
}

.subscription {
  display: grid;
  gap: 0.5em;
}
.subscription a {
  text-decoration: none;
  font-weight: var(--sc-font-weight-semibold);
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  color: var(--sc-color-primary-500);
}
.subscription a.cancel {
  color: var(--sc-color-danger-500);
}

@media screen and (max-width: 720px) {
  .subscription__action-buttons {
    --sc-flex-column-gap: var(--sc-spacing-xxx-small);
  }
  .subscription__action-buttons::part(base) {
    flex-direction: column;
  }
  .subscription__action-buttons sc-button::part(base) {
    width: auto;
    height: 2em;
  }
}