/* *****************************************************************************
*
*  CSS GRID (comparative table full width)
*
* ***************************************************************************** */
.c-comparative-grid-table {
  display: grid;
  grid-auto-rows: minmax(min-content, max-content);
  grid-template-areas:  "comparative-header"
                        "comparative-body"
                        "comparative-footer";

  .comparative-header { grid-area: comparative-header; }

  .comparative-body { grid-area: comparative-body; }

  .comparative-footer { grid-area: comparative-footer; }

  .comparative-middle-divider {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:  "comparative-divider-left comparative-divider-right"
  }

  .comparative-divider-left { grid-area: comparative-divider-left; }

  .comparative-divider-right { grid-area: comparative-divider-right; }

  // ------------------------------------------------------
  .comparative-header,
  .comparative-body,
  .comparative-footer,
  .comparative-middle-divider:not(:last-child) {
    border-bottom: 1px solid $gray-200;
  }

  .comparative-header__label {
    @include media-breakpoint-down(sm){
      writing-mode: vertical-lr;
      transform: rotate(180deg);
    }
  }
}