/* Types */
%basic,
.basic {
  display: flex;
  align-items: flex-start;
  color: color('neutral-2');
}

.compact {
  @extend %basic;

  .icon {
    width: rem-calc(80);
    height: rem-calc(80);
  }

  .header {
    @include typography-b-7(true);
    font-weight: 400;
  }

  .subheader {
    @include typography-7(false);
    font-weight: 300;
  }
}

.centered {
  @extend %basic;

  align-items: center;
}

.simple {
  @extend %basic;

  .icon {
    width: rem-calc(45);
    height: rem-calc(45);
  }

  .header {
    @include typography-4(false);
    font-weight: 300;
  }
}

/* End Types */

.icon {
  flex-grow: 0;
  flex-shrink: 1;
  width: rem-calc(100);
  height: rem-calc(100);

  + .aside { margin-left: ru(.75); }
}

.image-wrapper {
  + .aside { margin-left: ru(.75); }
}

.image {
  width: 100%;
}

.aside {
  flex-grow: 1;
  flex-shrink: 0;
  width: 50%;
  color: color('primary-3');
  + .icon {
    margin-left: ru(.75);
  }
}

.text {
  @include typography-5(false);

  color: inherit;
}

.header {
  @include typography-5(false);
  @include typography-semibold;

  color: inherit;
  word-wrap: break-word;
}

.subheader {
  @include typography-5(false);
  @include typography-regular;

  color: inherit;
}

.small {
  display: flex;
  align-items: center;
  margin-left: 0;

  .icon {
    width: rem-calc(20);
    height: rem-calc(20);

    + .aside {
      margin-left: ru(.5);
    }
  }

  .header {
    @include typography-7(false);

    color: color('brand-2');
  }
}

.bold {
  align-items: center;

  .icon {
    width: ru(1);
    height: ru(1);

    + .aside {
      margin-left: ru(.5);
    }
  }

  .header {
    font-weight: 600;
  }
}