/**
 * The base file that should be imported by every file.
 * There should be no CSS generation in this or from imported scss files at all!
 */
/**
 * Library
 */
/**
 * Variables and functions
 */
.section-content-charts .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1em; }
  @media (min-width: 981px) {
    .section-content-charts .container {
      -moz-column-gap: 2em;
           column-gap: 2em;
      grid-template-columns: 1.5fr minmax(0, 1fr); } }
  .section-content-charts .container .content {
    position: relative; }
    .section-content-charts .container .content h1, .section-content-charts .container .content h2, .section-content-charts .container .content h3 {
      margin: 0; }
    .section-content-charts .container .content .title-area .sub-title {
      font-weight: 800;
      padding-left: calc(40px + 90px / 4);
      padding-bottom: 0; }
      @media (min-width: 981px) {
        .section-content-charts .container .content .title-area .sub-title {
          padding-left: calc(60px + 90px / 2); } }
      @media (min-width: 981px) {
        .section-content-charts .container .content .title-area .sub-title--large-font {
          font-size: 58px;
          max-width: 39rem; } }
    .section-content-charts .container .content .content-area {
      position: relative; }
      .section-content-charts .container .content .content-area .icon {
        position: absolute;
        top: 0;
        left: 0;
        height: 40px;
        width: 40px;
        background-color: var(--white);
        display: flex;
        align-items: center;
        justify-content: center; }
        @media (min-width: 981px) {
          .section-content-charts .container .content .content-area .icon {
            height: 60px;
            width: 60px; } }
        .section-content-charts .container .content .content-area .icon img {
          max-height: 20px;
          max-width: 20px;
          height: auto;
          width: auto; }
          @media (min-width: 981px) {
            .section-content-charts .container .content .content-area .icon img {
              max-height: 30px;
              max-width: 30px; } }
      @media (max-width: 980px) {
        .section-content-charts .container .content .content-area .title {
          padding-left: calc(40px + 90px / 4); } }
      .section-content-charts .container .content .content-area .title h1, .section-content-charts .container .content .content-area .title h2, .section-content-charts .container .content .content-area .title h3 {
        margin: 0;
        padding: 4px 0 22.5px; }
        @media (min-width: 981px) {
          .section-content-charts .container .content .content-area .title h1, .section-content-charts .container .content .content-area .title h2, .section-content-charts .container .content .content-area .title h3 {
            padding: 17px 0 45px; } }
      .section-content-charts .container .content .content-area .section-content {
        padding-left: calc(40px + 90px / 4); }
        @media (min-width: 981px) {
          .section-content-charts .container .content .content-area .section-content {
            padding-left: calc(60px + 90px / 2); } }
  .section-content-charts .container .image {
    position: relative; }
    @media (min-width: 981px) {
      .section-content-charts .container .image {
        margin-top: 40px; } }
    .section-content-charts .container .image img {
      display: block;
      margin: 0 auto; }
    .section-content-charts .container .image .image-icon {
      margin-top: -50px; }
      @media (min-width: 768px) {
        .section-content-charts .container .image .image-icon {
          margin-top: -70px; } }
      .section-content-charts .container .image .image-icon img {
        max-height: 100px;
        width: auto; }
        @media (min-width: 768px) {
          .section-content-charts .container .image .image-icon img {
            max-height: 140px; } }

/*# sourceMappingURL=content-charts.css.map */