:host {
  --gap-size: var(--size-1);
  display: flex;
  flex-direction: column;
  gap: var(--gap-size);
  margin: var(--gap-size);
}

section {
  display: flex;
  flex-direction: column;
  gap: var(--gap-size);
}

@media (min-width: 640px) {
  :host {
    --gap-size: var(--size-4);
    flex-direction: row;
    flex-wrap: wrap;

    section {
      &:first-of-type {
        flex: 1;
      }
    }

    section:not(:first-of-type) {
      flex: 0 0 30%;
    }
  }
}