@import './../../base-styles/init/init.scss';

// Member training resources
//
// Styles the member training resources.
.member-training-resources {
  @include margin-top(0px);

  p {
    @include margin(0);
    @include margin-top(14px);
  }

  &__content {
    @include padding-left(15px);
    @include padding-right(15px);
    @include padding-bottom(26px);
    @include padding-top(26px);
    display: flex;

    @include breakpoint($tablet) {
      @include padding-bottom(25px);
    }
  }

  &__wrapper-link {
    padding: 0;
    display: flex;
    height: 100%;
    text-decoration: none;
  }

  &__image-wrapper {
    min-width: 53px;
    width: 53px;
    height: 53px;
    display: flex;
    justify-content: center;
    align-items: center;

    @include breakpoint($tablet) {
      height: 110px;
      width: 123px;
    }

    @include breakpoint($desktop) {
      flex-shrink: 0;
    }
  }

  &__image {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
  }

  &__text {
    @include padding-top(5px);
    @include padding-left(12px);
    display: flex;
    flex-direction: column;
    color: color('grey-dark');
    width: 100%;

    &:last-child {
      @include margin(0);
    }

    @include breakpoint($tablet) {
      @include padding-left(13px);
    }

    @include breakpoint($desktop) {
      @include padding-right(10px);
    }
  }

  &__inner {
    display: flex;
  }

  &__list {
    display: flex;

    &-title {
      @include breakpoint($tablet) {
        @include padding-top(30px);
      }
    }
  }
}
