@import '~bootstrap-sass/assets/stylesheets/bootstrap/variables';
@import '../../themes/common-variables.scss';
@import '../../themes/font-mixins.scss';
@import '../../themes/media-queries.scss';

.infobox-container {
  $logo-width: rem(23);
  $logo-height: rem(24);
  background-color: $white;
  position: relative;
  >img {
      width: $logo-width;
      height: $logo-height;
      position: absolute;
      left: 0;
      right: 0;
      margin-left: auto;
      margin-right: auto;
      margin-top: -($logo-height / 2);
  }

  .infobox-text {
    padding: rem(36) rem(24) rem(24) rem(24);
    h4 {
      font-size: rem(20px);
      line-height: 1.2;
      font-weight: bold;
      margin: 0;
			margin-bottom: rem(23px)
    }

    >div {
      font-size: rem(15px);
      line-height: 1.8;
    }
  }

  &.mobile {
    .infobox-text {
      @extend .infobox-text;
    }
  }
}


// tablet
@include mq($min-width: $screen-sm-min, $max-width: $screen-sm-max) {
}

// desktop. wait for spec
@include mq($min-width: $screen-md-min) {
}