@import '~styles/config';

.stickyItem {
  display: flex;
  flex-direction: column;
  justify-content: center;

  padding-right: $gutter;

  &:last-child {
    padding-right: 0;
  }

  &.textAlignRight {
    text-align: right;
  }

  &.alignRight {
    margin-left: auto;
  }

  &.alignRightItemWithButton {
    margin-left: auto;

    // make item shift to left to prevent button from overlapping
    @media (min-width: 1440px) and (max-width: 1806px) {
      margin-right: calc(183px - ((100vw - 1440px) / 2));
    }

    &:last-child {
      padding-right: $gutter;
    }
  }

  &__title {
    @include responsive-font(12, 14);

    font-family: $font-heading;
    font-weight: 400;
  }

  &__subTitle {
    margin: 0;

    font-size: 20px;
    font-family: $font-heading;
    font-weight: 700;
  }

  &__text {
    @include responsive-font(13, 15);

    font-family: $font-heading;
    font-weight: 300;
  }

  &__subText {
    @include responsive-font(12, 14);

    font-family: $font-heading;
    font-weight: 500;
    color: $color-grey500;
  }
}