.cool_data-group {
  .cool_data-row {
    display: flex;
    justify-content: center;

    @include breakpoint(mobileonly) {
      padding-left: calculateRem(25);
      padding-right: calculateRem(25);
    }

    .cool_data {
      align-self: center;
      width: 100%;

      .data-container {
        display: flex;
        justify-content: space-between;
        width: 100%;

        .metric-container {
          display: block;
          text-align: center;
          width: 30%;

          p {
            margin: 0;
            font-size: calculateRem(20);
            line-height: calculateRem(22);

            @include breakpoint(mobileonly) {
              font-size: calculateRem(16);
              line-height: calculateRem(17);
            }
          }

          i {
            font-size: calculateRem(36);
            @include breakpoint(mobileonly) {
              font-size: calculateRem(24);
            }
            &::after {
              width: calculateRem(65);
              display: block;
              content: " ";
              border-bottom: #FFFFFF solid calculateRem(2);
              margin-top: calculateRem(-1);
              @include breakpoint(mobileonly) {
                width: calculateRem(40);
              }
            }
          }

          &.operator-hours-saved {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
          }

          &.motorist-hours-saved {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;

            i {
              margin-bottom: -5px;
            }
            i::before {
              display: block;
              margin-bottom: calculateRem(-6);
              @include breakpoint(mobileonly) {
                margin-bottom: calculateRem(-4);
              }
            }
          }

          &.gallons-fuel-saved {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;

            i::before {
              margin-left: calculateRem(11);
              @include breakpoint(mobileonly) {
                margin-left: calculateRem(6);
              }
            }
          }

          .metric {
            color: $primary-color;
            font-size: calculateRem(35);
            line-height: calculateRem(40);
            @include breakpoint(mobileonly) {
              font-size: calculateRem(24);
              line-height: calculateRem(26);
            }
          }
        }
      }

      .fine-print {
        p {
          position: absolute;
          right: calculateRem(25);
          bottom: calculateRem(-25);
          font-size: calculateRem(10);
          padding-left: calculateRem(25);
          line-height: 1.5;
          text-align: right;

          @include breakpoint(mobileonly) {
            text-align: center;
          }
        }
      }
    }
  }
}
