hy-two-columns.scss

:host {
  display: block;
}

.hy-two-columns {
  align-items: flex-start;
  display: flex;
  flex-direction: column;

  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-top: 0;
  }
  p {
    margin-top: 0;
  }

  @include breakpoint($medium) {
    flex-direction: row;
  }

  &--reversed {
    flex-direction: column-reverse;

    @include breakpoint($medium) {
      flex-direction: row-reverse;
    }

    .hy-two-columns--side {
      padding-left: 0;
      padding-right: 0;

      @include breakpoint($medium) {
        padding-left: 0;
        padding-right: calc(100% / 12 * 0.5 + var(--gutter-medium));
      }

      @include breakpoint($overwide) {
        padding-right: calc(100% / 12 * 0.5 + var(--gutter-extrawide));
      }
    }
  }

  &--main {
    display: flex;
    flex-basis: 100%;
    width: 100%;

    @include breakpoint($medium) {
      flex-basis: calc(100% / 12 * 7);
    }

    [slot='main'] {
      width: 100%;
    }
  }

  &--side {
    display: flex;
    flex-basis: 100%;
    padding-left: 0;
    padding-right: 0;
    width: 100%;

    @include breakpoint($medium) {
      flex-basis: calc(100% / 12 * 5);
      padding-left: calc(100% / 12 * 0.5 + var(--gutter-medium));
      padding-right: 0;
    }

    @include breakpoint($overwide) {
      padding-left: calc(100% / 12 * 0.5 + var(--gutter-extrawide));
    }

    [slot='side'] {
      width: 100%;
    }
  }
}