#faq {
    padding-bottom: 4em;
    padding: 0em;
  }
  
  #faq h2 {
    padding: 1rem 1rem 0rem 1rem;
  }
  
  #faq > section > section {
    padding: 0em;
  }

  #questionGroups {
    padding: 1em;
    border-bottom: 0.05em solid var(--colour-border-color);
  }
  
  #questionGroups > ul > li {
    padding: 0.5em 0em;
    cursor: pointer;
  }
  
  #questionGroups > ul > li:hover {
    color: var(--colour-accent-color);
  }
  
  #questionGroups > ul > li.currentQuestionGroup {
    font-family: "MEDIUM", sans-serif;
    color: var(--colour-accent-color);
  }

  #answers {
    padding: 0em;
  }
  
  #answers h3 {
    padding: 1rem;
  }
  
  .question {
    padding: 1em;
    border-radius: 0.2em;
    border-bottom: 0.05em solid rgba(206, 212, 218, 0.5);
  }
  
  .question > div:first-of-type {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
  }
  
  .question p {
    margin: 0em;
  }
  
  .question .expandCollapseBtn p {
    padding-right: 0.5em;
  }
  
  .question .expandable {
    transition: height 0.3s;
  }
  
  .question .expandable p {
    margin: 0em;
    padding-top: 1em;
  }
  
  .expandCollapseBtn::after {
    font-size: 1.3em;
    content: "";
    mask-image: var(--icon-fa-angle-down);
    width: 0.75em;
    color: var(--colour-accent-color);
  }
  
  .question.currentQuestion {
    background-color: var(--colour-light-grey1);
  }
  
  .question.currentQuestion .expandCollapseBtn p {
    font-family: "MEDIUM", sans-serif;
    /*color: #bb5a5a;*/
  }

  @media screen and (min-width: 750px) {
    
    #faq {
      padding: 1em;
      
      display: grid;
      grid-template-columns: 20% auto;
      grid-row-gap: 1em;
      grid-column-gap: 2em;
    }
    
    #faq h2 {
      grid-column: 1/3;
      padding: 0em;
    }
    
    #questionGroups {
      padding: 0em;
      border-bottom: 0;
    }
    
    #answers h3 {
      padding: 0rem;
      margin-bottom: 1rem;
    }
  }