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($narrow) {
    flex-direction: row;
  }

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

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

    .hy-two-columns__item--side {
      margin-left: 0;
      margin-right: 0;

      @include breakpoint($narrow) {
        margin-right: 5.79%;
      }

      @include breakpoint($wide) {
        margin-right: 8.5%;
      }
    }
  }
}

.hy-two-columns__item {
  width: 100%;

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

    .hy-paragraph-text {
      width: 100% !important;
    }
  }

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

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

    @include breakpoint($narrow) {
      flex-basis: 67.01%;
    }

    @include breakpoint($wide) {
      flex-basis: 63%;
    }
  }

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

    @include breakpoint($narrow) {
      flex-basis: 32.99%; // sidebar width is always 4.5 column of the global 12-col content area grid.
      margin-left: 5.79%; // (half of the column+gutter) of global 12-col grid = gap between main and sidebar
    }

    @include breakpoint($wide) {
      flex-basis: 37%;
      margin-left: 8.5%; // (1 column + gutter) of global 12-col grid = gap between main and sidebar
      padding: 0;
    }

    // Key figure block inside Sidebar
    hy-key-figure {
      padding: 0 10.67%;
      @include breakpoint($narrow) {
        padding: 0;
      }
    }
  }
}