.box-card {
  padding: $margin-normal;

  @include breakpoint(sm) {
    position: absolute;
    max-width: 366px;
    min-height: 280px;
    padding: $margin-triple;
    top: 70px;
    left: $margin-normal;
    z-index: 3;
  }

  h3 {
    color: inherit;
    margin-top: $margin-half;

    @include breakpoint(sm) {
      margin-top: 0;
    }
  }

  .text {
    margin-bottom: $margin-triple;

    @include breakpoint(sm) {
      flex-grow: 1;
    }
  }

  .offer-icon {
    top: 0;
    position: relative;
    margin-right: -$margin-normal;
    float: right;

    &:after {
      display: none;
    }

    @include breakpoint(sm) {
      top: -13px;
      margin-right: -$margin-triple;

      &:after {
        display: block;
      }
    }
  }

  .btn {
    margin-top: auto;
  }

  &.background-tui-blue {
    background: rgba($color-blue-300, 1);
    color: $color-blue-500;

    h2,
    h3 {
      color: $color-white;
    }

    @include breakpoint(sm) {
      background: rgba($color-blue-300, .95);
    }
  }

  &.background-tui-dark-blue {
    background: rgba($color-blue-500, 1);
    color: $color-white;

    @include breakpoint(sm) {
      background: rgba($color-blue-500, .85);
    }
  }

  &.background-tui-white {
    background: rgba($color-beige-100, 1);
    color: $text-color;

    @include breakpoint(sm) {
      background-color: rgba($color-white, .85);
    }
  }

  &.to-right {
    right: $margin-normal;
    left: auto;
  }
}