/* =========
 Benefits
=========== */
.benefits .benefit-items {
    background-size: cover;
    background-position: center;
    background-color: var(--clr-gradient-bg);
    border-radius: 24px;
  }
 
  

  
  .benefits .benefit-items figure {
    overflow: hidden;
  }
  
  .benefits .benefit-items svg {
    fill: var(--clr-black);
    max-height: 12px;
    transition: color 0.3s ease-in-out;
  }
  
  .benefits .benefit-items:hover svg {
    fill: var(--clr-primary);
  }
  
  .benefits .two-cols .benefit-items {
    max-height: 500px;
    height: auto;
    min-height: 112px;
    padding: 1rem 1rem 0px 1rem;
  }
  
  .benefits .two-cols .benefit-items a {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
  }
  
  @media (min-width: 1280px) {
    .benefits .two-cols .benefit-items a {
      bottom: 2rem;
      right: 2rem;
    }
  }
  
  .benefits .two-cols .benefit-items a span {
    display: none;
  }
  
  @media (min-width: 576px) {
    .benefits .two-cols .benefit-items a span {
      display: block;
    }
  }
  
  .benefits .two-cols .benefit-items .image-section {
    max-width: 100px;
  }
  
  @media (min-width: 576px) {
    .benefits .two-cols .benefit-items .image-section {
      max-width: 300px;
      position: relative;
      bottom: -0.5rem;
      left: -2rem;
    }
  }
  
  @media (min-width: 768px) {
    .benefits .two-cols .benefit-items .image-section {
      max-width: 100%;
    }
  }
  
  @media (min-width: 576px) {
    .benefits .two-cols .benefit-items {
      display: block;
    }
  
    .benefits .two-cols .benefit-items h4 {
      order: 1;
      margin-bottom: 1rem;
      margin-left: unset;
      text-align: left;
    }
  
    .benefits .two-cols .benefit-items .image-section {
      order: 2;
    }
  }
  
  @media (min-width: 1280px) {
    .benefits .two-cols .benefit-items {
      padding: 2rem 2rem 0px 2rem;
    }
  }
  
  .benefits .two-cols .benefit-items:first-child {
    background-color: var(--clr-gradient-mental);
  }
  
  .benefits .three-cols .benefit-items {
    padding: 1rem 1.75rem 1rem 1rem;
  }
  
  @media (min-width: 1280px) {
    .benefits .three-cols .benefit-items {
      padding: 1.5rem 3.5rem 1.5rem 2rem;
    }
  }
  
  .benefits .three-cols .benefit-items figure {
    order: 1;
  }
  
  @media (max-width: 576px) {
    .benefits .three-cols .benefit-items figure {
      flex: 0 0 80px;
      max-width: 80px;
    }
  }
  
  @media (min-width: 1280px) {
    .benefits .three-cols .benefit-items figure {
      flex: 0 0 120px;
      max-width: 120px;
    }
  }
  
  @media (min-width: 1600px) {
    .benefits .three-cols .benefit-items figure {
      flex: 0 0 calc(100% - 250px);
      max-width: calc(100% - 250px);
    }
  }
  
  .benefits .three-cols .benefit-items h4 {
    order: 2;
    padding: 0 1rem;
    text-align: right;
  }
  
  @media (max-width: 576px) {
    .benefits .three-cols .benefit-items h4 {
      flex: 0 0 calc(100% - 100px);
      max-width: calc(100% - 100px);
    }
  }
  
  @media (min-width: 768px) {
    .benefits .three-cols .benefit-items h4 {
      order: 1;
      padding-left: 0;
      text-align: left;
    }
  }
  
  @media (min-width: 1280px) {
    .benefits .three-cols .benefit-items h4 {
      font-size: 1.5rem;
      flex: 0 0 calc(100% - 140px);
      max-width: calc(100% - 140px);
    }
  }
  
  @media (min-width: 1600px) {
    .benefits .three-cols .benefit-items h4 {
      flex: 0 0 230px;
      max-width: 230px;
    }
  }
  
  .benefits .three-cols .benefit-items .arrow-icon {
    order: 3;
    flex: 0 0 20px;
    max-width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .benefits .three-cols .benefit-items .arrow-icon svg {
    width: 16px;
  }