.Colaborative {
  &._solucao {
    padding-top: 56px;

    .grid {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      row-gap: 18px;
      column-gap: 16px;
    }

    .card {
      gap: 16px;
      height: 100%;

      img {
        width: 27px;
        height: 27px;
      }

      .Title {
        font-weight: 700;
        line-height: 120%;
        color: #272647;
      }

      p {
        padding-top: 8px;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 120%;
        color: #4a4a4a;
        min-height: none;
      }
    }

    .coluna {
      width: 100%;

      .subgrid {
        display: flex;
        flex-direction: column;
        row-gap: 18px;
        height: 100%;

        .card {
          height: 100%;
        }
      }

      &._central {
        order: 3;
        width: 100%;

        .card {
          display: flex;
          align-items: flex-end;
          justify-content: center;
          padding-bottom: 0;

          img {
            display: block;
            width: auto;
            height: auto;
          }
        }
      }
    }
  }

  &._beneficios {
    .Title {
      padding-bottom: 56px;
    }

    .itens {
      display: flex;
      flex-direction: column;
      gap: 18px;

      .item {
        h3 {
          gap: 8px;
          padding: 8px 0;
          color: $title;
          font-size: 16px;
          font-style: normal;
          font-weight: 600;
          line-height: normal;

          img {
            width: 18px;
          }
        }
      }
    }

    .image {
      img {
        width: 100%;
      }
    }
  }

  &._acesso {
    .cabecalho {
      display: flex;
      flex-direction: column;
      gap: 16px;
      max-width: 730px;
      padding-bottom: 48px;
    }

    .col-6 {
      position: relative;
      justify-content: space-between;
      border-radius: 4px;
      padding-bottom: 400px;
      overflow: hidden;

      .content {
        position: relative;
        z-index: 1;
        padding: 48px 48px 0;
      }

      .Body {
        padding: 12px 0 40px;
      }

      .image {
        position: absolute;
        bottom: 0;
        z-index: 0;
        display: block;
        width: 100%;
      }

      .links {
        gap: 20px;

        img {
          display: block;
          width: 100%;
          max-width: 176px;
        }
      }

      &:first-of-type {
        background: linear-gradient(112deg, #28154f 0%, #502a9d 96.6%);

        .Title {
          color: #fff;
        }

        .Body {
          color: $text-light;
        }
      }

      &:last-of-type {
        background: #f1f1ff;
      }
    }
  }

  @media (min-width: $md) {
    &._solucao {
      .coluna {
        width: calc(50% - 8px);

        .subgrid {
          .card {
            height: calc(50% - 8px);
          }
        }
      }
    }
  }

  @media (min-width: $lg) {
    &._solucao {
      .grid {
        column-gap: 24px;
      }

      .coluna {
        width: calc(25% - 18px);
        padding-bottom: 80px;

        &:last-of-type {
          order: 3;
        }

        .subgrid {
          row-gap: 26px;
        }

        &._central {
          order: 2;
          width: calc(50% - 12px);
          padding-bottom: 0;
        }
      }
    }

    &._beneficios {
      .image {
        img {
          display: block;
          position: absolute;
          width: 50%;
          max-width: 623px;
        }
      }

      ._reversed {
        .image {
          img {
            left: -9.6%;
          }
        }
      }
    }

    &._acesso {
      .Row {
        flex-direction: row;
      }
      .col-6 {
        width: calc(50% - 12px);
      }
    }
  }
}