intermediate.component.scss

@import '../../../assets/style/config';
@import '../../../assets/style/mixins';

.card-container {
  position: relative;
  width: 18em;
  margin: 4em auto;
}

.card {
  height: 20.5em;
  width: 20em;
  position: absolute;
  border-radius: $border-radius;
  background: #cecece;
  padding: 32px 16px;
  box-shadow: 1px 1px 7px rgba(0,0,0,.65);

  &.front {
    z-index: 10;
  }

  &.background {
    z-index: -1;

    &.two {
      transform: rotateZ(4deg);
    }

    &.three {
      transform: rotateZ(-4deg);
    }

    &.more {
      transform: rotateZ(-8deg);
    }

  }

  .mock {
    background: rgba(0,0,0,.375);
    min-height: 1em;
    color: $primary_100;

    &.title {
      width: 70%;
      margin: 8px 0;
    }

    &.content {
      height: 14em;
      margin-top: -3em;
      text-align: center;

      .count {
        font-size: 4em;
        line-height:0.75em;
        margin-bottom:0;
        padding-top: 72px;
      }
    }
  }

  .action {
    height: 2em;
    display: inline-flex;
    margin: 1em 0;
    width: 100%;

    button {
      margin: 0 16px;
    }

  }
}