.container {
  width: 100%;
  max-width: var(--container-default);
  margin-left: auto;
  margin-right: auto;
}

.content {
  padding-bottom: calc(var(--spacing-14) + var(--spacing-3));
  display: flex;
  flex-direction: column;
  gap: var(--spacing-9);
}

@media screen and (min-width: 96rem) {
  .container {
    max-width: var(--container-xl);
  }
}

@media screen and (min-width: 128rem) {
  .container {
    max-width: var(--container-2xl);
  }
}

@media screen and (min-width: 48rem) {
  .content {
    padding-left: var(--spacing-7);
    padding-right: var(--spacing-7);
  }
}

@media screen and (min-width: 48rem) {
  .content {
    padding-top: calc(var(--spacing-14) + var(--spacing-3));
  }
}