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

article {
  outline: var(--pos-border-solid);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  background-color: var(--pos-card-background);

  header {
    display: flex;
    flex-direction: column;

    pos-picture {
      --object-fit: contain;
      --width: 100%;
      --height: auto;
      --max-height: 300px;
      border-radius: var(--radius-sm) var(--radius-sm) 0 0;
      --border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    }

    h1,
    pos-type-badges {
      margin: var(--size-2);
    }
  }

  main {
    padding: var(--size-2);

    pos-description {
      color: var(--pos-secondary-text-color);
      font-weight: var(--weight-light);
    }
  }
}

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

    section:first-of-type {
      flex: 0 0 25%;
    }

    section:not(:first-of-type) {
      flex: 1;
    }
  }
}