@import "tools.mixins";

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

    > .c-card:nth-of-type(1) {
      @include grid-row(1, 2);
      @include grid-column(1, 2);
    }
    > .c-card:nth-of-type(2) {
      @include c-package-snake-eyes-c-card--full-size;
    }

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

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

@mixin c-package-snake-eyes-tablet-medium {
  .c-package--snake-eyes {
    @include grid-template-rows(0, grid-repeat(2, auto));
    @include grid-template-columns(0, grid-repeat(2, 1fr));

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

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

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

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

@mixin c-package-snake-eyes-desktop {
  .c-package--snake-eyes {
    @include grid-template-columns(0, grid-repeat(3, 1fr));

    > .c-card:nth-of-type(2) {
      @include c-package-snake-eyes-c-card--full-size;
      border-width: 0;
    }
  }

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

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

@mixin c-package-snake-eyes-c-card--full-size {
  @include grid-row(1, 2);
  @include grid-column(2, 3);

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