




  .icon-columns-list {
    --columns: 3;
    --item-gap: var(--grid-gap);
    --item-width: calc((100% - (var(--columns) * var(--item-gap))) / var(--columns));
    --margin: max(30px, calc(50 * var(--base-unit)));
    margin-bottom: calc(var(--margin) * -1);
    margin-right: calc(var(--item-gap) * -1);
    
    display: flex;
    flex-flow: row wrap;

  }
  
  .icon-columns-list > li {
    margin-bottom: var(--margin);
    width: var(--item-width);
    margin-right: var(--item-gap);
  }
  
  .icon-column-item .icon {
    margin-bottom: max(10px, calc(25 * var(--base-unit)));
  }
  
  .icon-column-item svg {
    width: max(35px, calc(60 * var(--base-unit)));
    height: auto;
  }
  
  .icon-column-item svg path,
  .icon-column-item svg circle {
    fill: var(--icon-color);
  }
  
  
  
  
  
  
  
  @media (max-width: 900px) {
    
    .icon-columns-list {
      --columns: 2;
      --item-gap: var(--page-padding-left);
    }
    
  }
  
  
  
  
  
  
  
  @media (max-width: 600px) {
    
    .icon-columns-list {
      --columns: 1;
      --margin: 1.25em;
    }
    
    .icon-column-item {
      display: flex;
      flex-flow: row nowrap;
    }
    
    .icon-column-item .icon {
      margin-bottom: 0;
      margin-right: 1em;
      flex-shrink: 0;
    }
    
    .icon-column-item svg {
      width: max(20px, calc(40 * var(--base-unit)));
    }
    
  }