.countdown-timer-holder {

  .countdown-item {
    display: flex;
    align-items: center;

    .countdown-unit {
      display: block;
      margin-right: 10px;
      margin-left: 10px;
      text-align: center;

      .number,
      .text {
        display: block;
      }
    }

    @include media-breakpoint-down(sm) {
      @include make-row();
      margin-left: 0;
      margin-right: 0;

      .countdown-col {
        @include make-col-ready();
        @include make-col(6);
        padding-left: 10px;
        padding-right: 10px;
        margin-bottom: 30px;
      }

      .countdown-unit {
        margin-left: 0 !important;
        margin-right: 0 !important;
      }
    }
  }

  &.left {
    .countdown-item {
      justify-content: flex-start;

      .countdown-unit:first-child {
        margin-left: 0;
      }
    }
  }

  &.center {
    .countdown-item {
      justify-content: center;
    }
  }

  &.right {
    .countdown-item {
      justify-content: flex-end;

      .countdown-unit:last-child {
        margin-right: 0;
      }
    }
  }

  &.medium {

    .countdown-unit {

      .number {
        font-size: 38px;
        font-weight: 300;
        letter-spacing: -2px;
        @include media-breakpoint-down(sm) {
          font-size: 24px;
          letter-spacing: -1px;
        }
      }
    }
  }

  &.large {

    .countdown-unit {

      .number {
        font-size: 50px;
        font-weight: 300;
        letter-spacing: -2px;

        @include media-breakpoint-down(sm) {
          font-size: 24px;
          letter-spacing: -1px;
        }
      }
    }
  }

  &.standard {

    .countdown-unit {
      min-width: 100px;
      background-color: $white;
      border: 1px solid $border-color;
      border-radius: $border-radius;

      .number {
        color: color('orange');
        padding: 25px 15px;
        border-bottom: 1px solid #efefef;
      }

      .text {
        line-height: 1;
        padding: 8px 15px;
      }
    }
  }

  &.transparent {

    .countdown-unit {
      min-width: 100px;
      background-color: rgba(gray('600'), 0.1);
      line-height: 1;
      border-radius: $border-radius;
      padding: 25px 20px;

      .number {
        margin-bottom: 10px;
      }
    }

    &.light {

      .countdown-unit {
        background-color: rgba($white, 0.1);
        color: $white;
      }
    }
  }
}