.ce-gridbenefits {
  .ce-gridbenefits__items {
    --gap: 1rem;

    @media screen and (min-width: 768px) {
      --gap: 2rem;
    }

    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(12, 1fr);

    .ce-gridbenefits__item {
      display: flex;
      gap: var(--gap);
      box-sizing: border-box;

      /* Mobile-first: All items full width by default */
      grid-column: span 12;
      padding-right: 0;
      border-right: none;
      border-bottom: 2px solid var(--lightgrey);
      padding-bottom: var(--gap);
      margin-bottom: var(--gap);

      &:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
      }

      /* Tablet and desktop styles */
      @media (min-width: 768px) {
        padding-right: var(--gap);
        border-right: 2px solid var(--lightgrey);
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0;

        &.width-33 {
          grid-column: span 4;
        }

        &.width-50 {
          grid-column: span 6;
        }

        &.width-66 {
          grid-column: span 8;
        }

        &.width-100 {
          grid-column: span 12;
          padding-right: 0;
          border-right: none;
          justify-content: center;
          border-top: 2px solid var(--lightgrey);
          border-bottom: 2px solid var(--lightgrey);

          /* Remove border-top from first .width-100 item */
          &:first-child {
            border-top: none;
            padding-bottom: var(--gap);
          }

          /* Remove border-bottom from last .width-100 item */
          &:last-child {
            padding-top: var(--gap);
            border-bottom: none;
          }
        }
      }

      &.horizontal-flex-start {
        flex-direction: row;
      }

      @media screen and (min-width: 768px) {
        &.horizontal-flex-end {

          flex-direction: row-reverse;
        }

        &.vertical-flex-start {
          align-items: flex-start;
        }

        &.vertical-flex-center {
          align-items: center;
        }

        &.vertical-flex-end {
          align-items: flex-end;
        }
      }

      .ce-gridbenefits__item-number {
        font-size: 2rem;
        line-height: 1;
        font-weight: bold;
        color: var(--magenta);
      }

      p {
        max-width: 47ch;
        font-size: 0.7rem;
      }
    }

    /* Remove border from the last item in the container */
    .ce-gridbenefits__item:last-child {
      border-right: none;
      padding-right: 0;
    }

    /* Add class for items that should not have right border */
    .ce-gridbenefits__item.no-right-border {
      border-right: none;
      padding-right: 0;
    }
  }
}