.cms-validation-container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 1.5rem 2.5rem;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  margin-bottom: 3rem;

  #validation_header {
    color: #20242b;
    width: 100%;
    text-align: center;
    font-size: 36px;
    line-height: 2.75rem;
    margin: 1.5rem 0 3rem;
  }

  .validation-cards {
    width: fit-content;
    display: grid;
    gap: 1rem;
    margin: 0 auto;

    /* when choose the card as link open with new tab, need below style to cover the gds3 behavior */
    a.validation-card::after {
      content: '';
    }

    a.validation-card:hover {
      color: #026fad !important;
      text-decoration: none !important;

      h3 {
        color: #026fad !important;
      }
    }

    .validation-card,
    .trust-pilot {
      min-width: 224px;
      max-width: 316px;
      box-sizing: border-box;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-sizing: border-box;
    }

    .validation-card {
      padding: 0.5rem 1.5rem 2rem;
      text-decoration: none;
      row-gap: 0.5rem;
      color: #20242b;

      .validation-card-image-container {
        height: 84px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          max-height: 84px;
          max-width: 100%;
        }
      }

      h3 {
        font-size: 1.625rem;
        line-height: 2.25rem;
        margin: 0;
        text-align: center;
        font-weight: bold;
        padding-top: 0.625rem;
      }

      p {
        font-size: 1.125rem;
        line-height: 1.625rem;
        text-align: center;
        margin: 0;
      }
    }

    .trust-pilot {
      padding: 1.5rem;
      display: flex;
      align-items: center;

      &:before {
        position: absolute;
        display: block;
        content: '';
        left: calc(-9.5px);
        border-left: 1px solid #dcdee1;
        height: 100%;
        width: 0;
      }
    }
  }

  &.p1 {
    .validation-cards {
      grid-template-columns: repeat(4, 1fr);
    }

    .cta-group {
      margin-top: 3rem;
      width: 100%;
      display: flex;
      justify-content: center;
      column-gap: 1.5rem;
    }
  }

  &.p2 {
    .validation-cards {
      grid-template-columns: repeat(4, 1fr);

      & > .validation-card:nth-child(2) {
        &:before {
          position: absolute;
          display: block;
          content: '';
          right: calc(-9.5px);
          top: 0;
          border-left: 1px solid #dcdee1;
          height: 100%;
          width: 0;
        }
      }
    }

    .cta-group {
      margin-top: 3rem;
      width: 100%;
      display: flex;
      justify-content: center;
      column-gap: 1.5rem;
    }

    .trust-pilot {
      margin: 4rem auto 0;
      width: 100%;
    }
  }

  &.p3 {
    .validation-cards {
      grid-template-columns: 1fr 1fr 2fr;

      .validation-card {
        img {
          height: 7.375rem;
        }
      }

      .validation-list-container {
        display: flex;
        flex-direction: column;
      }

      & > .validation-card:nth-child(2) {
        &:before {
          position: absolute;
          display: block;
          content: '';
          right: calc(-9.5px);
          top: 0;
          border-left: 1px solid #dcdee1;
          height: 100%;
          width: 0;
        }
      }
    }

    .cta-group {
      margin-top: 3rem;
      width: 100%;
      display: flex;
      justify-content: center;
      column-gap: 1.5rem;
    }

    .trust-pilot {
      margin: 1rem auto 3rem;
      width: 100%;
      text-align: center;
    }
  }

  &.p4 {
    text-align: center;
    display: block;
  }

  &.p2,
  &.p3 {
    .trust-pilot {
      & > div:nth-child(1) {
        display: block;
      }
      & > div:nth-child(2) {
        display: none;
      }
    }
  }

  &.p4 {
    & > div:nth-child(1) {
      display: block;
    }
    & > div:nth-child(2) {
      display: none;
    }
  }

  @media screen and (max-width: 1025px) {
    padding: 1.5rem;

    &.p1,
    &.p2 {
      .validation-cards {
        width: fit-content;
        gap: 1.5rem;
        grid-template-columns: repeat(2, 1fr);

        & > .validation-card:nth-child(2) {
          &:before {
            display: none;
          }
        }

        .trust-pilot {
          &:before {
            display: none;
          }
        }
      }
    }

    &.p3 {
      .validation-cards {
        display: flex;
        flex-wrap: wrap;
        width: fit-content;
        justify-content: center;
        gap: 1.5rem;

        .validation-list-container {
          flex-basis: 100%;
          align-items: center;
        }

        & > .validation-card:nth-child(2) {
          &:before {
            display: none;
          }
        }

        .trust-pilot {
          &:before {
            display: none;
          }
        }
      }
    }
  }

  @media screen and (max-width: 42.4363rem) {
    .fil-cta .grid-x {
      gap: 1rem;
    }

    .fil-cta .cell fil-button {
      margin: 0;
    }
  }

  @media screen and (max-width: 35rem) {
    &.p1,
    &.p2 {
      .validation-cards {
        grid-template-columns: 1fr;
      }
    }

    &.p2,
    &.p3,
    &.p4 {
      .trust-pilot {
        text-align: center;
      }
    }
  }
}