/*
 * Customer service CSS
 *
 * Not included as part of the design system.
 */

 :root {
    --body-background: white;
  }
  
  .cs-grid {
    display: grid;
    grid-gap: var(--space);
    max-width: var(--section-width);
    margin: 0 auto;
    padding: 20px;
    --impact: #373737;
    --space: 30px;
    --link-color: var(--black);
  }
  
  .cs-grid * {
    margin: 0;
  }
  
  .cs-button {
    display: block;
    padding: 15px var(--space);
    color: white;
    background-color: var(--impact);
    font: bold 20px/normal var(--sans);
    text-align: center;
    border-radius: 4px;
  }
  
  .cs-button:hover {
    color: white;
  }
  
  .cs-box {
    display: block;
    border: 1px solid var(--impact);
    grid-column: 1/-1;
  }
  
  .cs-box iframe {
    display: block;
  }
  
  .cs-header {
    display: block;
    padding: 15px var(--space);
    color: white;
    background-color: var(--impact);
    font: bold 20px/normal var(--sans);
    text-align: center;
  }
  
  .cs-list {
    display: grid;
    grid-gap: 15px;
    grid-template-columns: var(--columns);
    padding: var(--space);
  }
  
  .cs-list > a {
    padding: 0 var(--item-padding);
  }
  
  .cs-contact {
    padding: var(--space);
  }
  
  .cs-info {
    margin-bottom: var(--space);
  }
  
  .cs-contact span {
    display: block;
  }
  
  .cs-text {
    grid-column: 1/-1;
    text-align: center;
  }
  
  @media(min-width: 728px) {
    .cs-grid {
      grid-template-columns: 1fr 1fr;
    }
  }
  
  @media(min-width: 990px) {
    .cs-list {
      text-align: center;
    }
  
    .cs-contact {
      text-align: center;
    }
  
    .cs-contact span {
      display: inline-block;
    }
  
    .cs-contact span:before {
      content: "|";
      display: inline-block;
      margin: 0 10px;
    }
  }