/* Wrapper */
.io-wrapper {
    display: flex;

    flex-direction: column;
    gap: 16px;
  }

.io-header {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

.io-cta {
    display: inline-flex;
    align-self: flex-start;
  }

.io-cta-desktop {
    display: none;
  }

.io-cta-mobile {
    width: 100%;
    justify-content: start;
  }
  
  /* Grid:
     - Mobile: 1 col
     - Tablet (>=600px): 2 cols
     - Desktop small (>=900px): 3 cols
     - Desktop large (>=1200px):
         items_4 => 4 cols
         items_6 => 6 cols
  */
  .io-grid {
    padding: 20px;
    background: var(--paper);
    border-radius: var(--radius-component, var(--radius-xl, 12px));
    display: grid;
    grid-template-columns: 1fr;

  }
  
  /* Tablet */
  @media (min-width: 600px) {
    .io-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  /* Desktop small */
  @media (min-width: 900px) {
    .io-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .io-header {
      flex-direction: row;
      align-items: flex-start;
      justify-content: space-between;
    }
    .io-cta-desktop { display: inline-flex; }
    .io-cta-mobile { display: none; }
  }
  
  /* Desktop large – switch to 4 or 6 columns based on class */
  @media (min-width: 1200px) {
    .io-grid.items_4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .io-grid.items_6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  
  /* Card */
  .io-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 12px;
    background: var(--paper);
    border: 0;
    outline: 0;
    justify-content: flex-start;
  }
  
  /* Icon */
  .io-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg, 8px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  .io-icon img {
    width: 40px;
    height: 40px;
    display: block;
  }
  
  /* Copy */
  .io-copy { display: flex; flex-direction: column; gap: 6px; }
  /* .io-title { line-height: 1.25; }
  .io-desc  { line-height: 1.45; }
   */
 .overflow_temp_icon{
    filter: invert(30%) sepia(100%) saturate(2363%) hue-rotate(159deg) brightness(97%) contrast(107%) 
  }