@import "../../variables.scss";

.InfoCardContainer {
  ul {
    margin:0  -10px;
    li {
      width: 20%;
      flex: 0 0 20%;
      padding: 0 $pad;
      @media (max-width: $xl) {
        width: 33.333%;
        flex: 0 0 33.333%;
      }
      @media (max-width: $lg) {
        width: 50%;
        flex: 0 0 50%;
      }
      .InfoCardItem {
        border: solid 1px #e5e5e5;
        border-radius: $bdr-rds + 5;
        padding: $pad + 6;
        height: calc(100% - 20px);
        margin-bottom: $mrg + 10;
        @media (max-width: $xxl) {
          padding: $pad + 2;
        }        
        .InfoCardHeading {
          display: block;
          font-size: $font + 8;
          color: $black;
          padding-bottom: $pad;
          @media (max-width: $xxl) {
            font-size: $font + 6;
          }
        }
        .InfoCardNumber {
          display: block;
          font-size: $font + 16;
          font-weight: $font-weight-heavy;
          color: $black;
          line-height: 26px;
          @media (max-width: $xxl) {
            font-size: $font + 8;
          }
          .InfoCardIcon {
            display: block;
            margin-right: $mrg;
            margin-top: -2px;
            img {
              display: block;
            }
          }
        }
      }
    }
  }
}