@layer components {
  .ps .complementary-products {
    --border: var(--border-width) solid var(--color-borders);
    --items-gap: 0;
    --heading-padding-bottom: var(--spacing-unit-s);
  }

  .eg .complementary-products {
    --border: none;
    --items-gap: var(--spacing-unit-xs);
    --heading-padding-bottom: 0;
  }

  .sc .complementary-products {
    --border: none;
    --items-gap: var(--spacing-unit-s);
    --heading-padding-bottom: 0;
  }

  .complementary-products__heading {
    margin-bottom: var(--spacing-unit-s);
  }

  .complementary-products__items {
    display: flex;
    flex-direction: column;
    gap: var(--items-gap);
    border: var(--border);

    @media screen and (min-width: 768px), print {
      flex-direction: row;
    }

    @media screen and (min-width: 1024px), print {
      flex-direction: column;
    }
  }

  .complementary-products__item {
    flex-grow: 1;
    border-radius: var(--border-radius-branded-l);
    background: var(--color-utility-01);

    & + & {
      border-top: var(--border);

      @media screen and (min-width: 768px), print {
        border-top: none;
        border-left: var(--border);
      }

      @media screen and (min-width: 1024px), print {
        border-top: var(--border);
        border-left: none;
      }
    }
  }
}