.block-cards {
  background-color: var(--wp--preset--color--bg-off-white);
  padding: 88px 0 144px;
  position: relative;
  
  & .card-group,
  & .wp-block-button {
    position: relative;
    z-index: 1;
  }

  &:before {
    bottom: 0;
    content: '';
    position: absolute;
    background-image: linear-gradient(to bottom, transparent, white);
    height: 88px;
    width: 100%;
  }

  & .wp-heading {
    margin-bottom: 4rem;
    text-align: center;

    & strong {
      color: var(--wp--preset--color--darkorange);
      font-weight: 700;
    }
  }

  & .card-group {
    display: grid;
    gap: 32px;
    grid-template-columns: 1fr;
    justify-content: center;
    margin: 0 auto;
    max-width: 1111px;
    padding: 0 1rem;
    width: 100%;
    

    @media ( width >= 840px ) {
      grid-template-columns: repeat(6, 1fr);

      & .card-item.odd {
        grid-column: 1 / span 2;
    
        &:nth-child(2) {
          grid-column: 3 / span 2;
        }
    
        &:nth-child(3) {
          grid-column: 5 / span 2;
        }
    
        &:nth-child(4) {
          grid-column: 2 / span 2;
        }
    
        &:nth-child(5) {
          grid-column: 4 / span 2;
        }
      }
    
      & .card-item.even {
        grid-column: 2 / span 2;
    
        &:nth-child(2) {
          grid-column: 4 / span 2;
        }
      }
    }
  }

  

  & .card-item {
    border-radius: var(--wp--custom--border-radius--medium);
    background-color: white;
    position: relative;
    overflow: hidden;

    & .content {
      padding: 32px 32px 36px;

      & a.title {
        color: var(--wp--preset--color--black);
        font-size: var(--wp--preset--font-size--md);
        font-weight: 600;
        line-height: 1.1;
        text-decoration: none;

        &:after {
          content: '';
          inset: 0;
          position: absolute;
        }

        &:hover {
          color: var(--wp--preset--color--darkorange);
        }
      } 

      & .description p {
        font-weight: 400;
        line-height: 1.3;
        margin: 0.5rem 0 0;
      }
    }
  }

  & svg#background {
    position: absolute;
    top: 15%;
    z-index: 0;
  }

}

.products {
  & .block-cards {
    background: 0;
    & .card-item {
      background-color: var(--wp--preset--color--bg-off-white);
    }
  }
}

.solution {
  & .entry-content {
    & .block-cards {
      margin-top: 0;
    }
  }
  /* & .block-cards {
    background: 0;
  } */
}