action-block.scss

@mixin stacked-grid {
  grid-template-columns: 1fr;
  grid-row: 1/1;
}
@mixin stacked-content {
  margin-bottom: $spacing-l;
}

.action-block {
  @extend .selectable-card;
  grid-template-columns: 2fr 1fr;
  display: grid;
  padding: $spacing-m $spacing-l;
  line-height: inherit;
  grid-gap: $spacing-m;

  @include until($mobile) {
    @include stacked-grid();
  }
}

.action-block-info {
  @include until($mobile) {
    @include stacked-content();
  }
}

.action-block.stacked {
  @include stacked-grid();
}
.stacked > .action-block-info {
  @include stacked-content();
}

.action-block-title {
  font-size: $size-5;
  font-weight: $font-weight-bold;
}
.action-block-action {
  text-align: right;
  @include until($mobile) {
    text-align: left;
  }
}

/* Action Block Grid */
.replication-actions-grid-layout {
  display: flex;
  flex-wrap: wrap;
  margin: $spacing-m 0;
  @include until($tablet) {
    display: block;
  }
}

.replication-actions-grid-item {
  flex-basis: 50%;
  padding: $spacing-s;
}

.replication-actions-grid-item .action-block {
  height: 100%;
  width: 100%;
  @include until($tablet) {
    height: inherit;
  }
}