@import "tools.mixins";

@mixin o-package-snake-eyes-mobile-wide {
  .c-package--snake-eyes {
    @include grid-rows(0, grid-repeat(2, auto));
    @include grid-columns(0, grid-repeat(2, 1fr));

    > .c-card:nth-of-type(1) {
      @include grid-row-area(1, 3, false);
      @include grid-column-area(1, 2, false);
      border-width: 0;
    }
    > .c-card:nth-of-type(2) {
      @include grid-row-area(1, 2, false);
      @include grid-column-area(2, 3, false);
    }

    .c-card--opinion .c-card__media,
    .c-card .c-card__media {
      display: block;
      width: rem(70);
    }
  }

  .c-package--snake-eyes__col {
    @include grid-row-area(2, 3, false);
    @include grid-column-area(2, 3, false);
  }
}

@mixin o-package-snake-eyes-tablet-wide {
  .c-package--snake-eyes {
    @include grid-rows(0, auto);
    @include grid-columns(0, grid-repeat(3, 1fr));

    > .c-card:nth-of-type(1) {
      @include grid-row-area(1, 2, false);
      @include grid-column-area(1, 2, false);
    }
    > .c-card:nth-of-type(2) {
      @include grid-row-area(1, 2, false);
      @include grid-column-area(2, 3, false);
      border-width: 0;

      .c-card__grid {
        @include grid-columns(0, 1fr);
        @include grid-rows(rem(10), grid-repeat(2, auto));
      }
      .c-card__hed {
        font-size: rem(24);
      }
      .c-card__content {
        @include grid-row-area(2, 3);
      }
      .c-card__media {
        display: block;
        width: 100%;
        @include grid-column-area(1, 2, false);
        @include grid-row-area(1, 2);
      }
    }
  }

  .c-package--snake-eyes__col {
    @include grid-row-area(1, 2, false);
    @include grid-column-area(3, 4, false);
  }
}

@mixin o-package-snake-eyes-desktop {
  .c-package--snake-eyes .c-card {
    .c-card__media {
      width: rem(100);
    }
  }
}
