.our-clients {
  padding-bottom: var(--content-vertical-space); }
  .our-clients h1 {
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 40px; }
  .our-clients .clients-list {
    gap: 30px;
    justify-content: center;
    flex-direction: column-reverse;
    align-items: center; }
    .our-clients .clients-list img {
      max-height: 200px;
      height: auto;
      object-fit: cover;
      width: 100%;
      height: 100%; }
    .our-clients .clients-list .items {
      padding: 16px; }
      .our-clients .clients-list .items .client-item {
        display: flex;
        flex-direction: column;
        gap: 16px;
        flex: 1;
        min-width: 200px;
        box-sizing: border-box;
        padding: 30px;
        border-radius: 10px;
        max-width: 100%;
        align-items: center;
        cursor: pointer;
        transition: all 0.2s; }
        .our-clients .clients-list .items .client-item h2 {
          margin: 0;
          text-align: left;
          width: 100%; }
        .our-clients .clients-list .items .client-item p {
          text-align: left;
          margin: 0;
          height: 0px;
          overflow-y: hidden;
          width: 100%; }
        .our-clients .clients-list .items .client-item.open {
          background: var(--color-primary);
          color: var(--color-clean); }
          .our-clients .clients-list .items .client-item.open p {
            height: max-content; }
  @media (min-width: 1200px) {
  .our-clients .clients-list {
    align-items: stretch;
    height: max-content;
    flex-direction: row; }
    .our-clients .clients-list img {
      display: block;
      flex: unser;
      width: auto;
      height: unset;
      max-height: 100%;
      object-fit: cover;
      border-radius: 10px;
      max-width: 36%; }

    .our-clients .clients-list .items {
      justify-content: flex-end; }
      .our-clients .clients-list .items .client-item {
        max-width: 700px;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px; } }