.container:has(+ .clients-partners) {
  padding-top: var(--space-xxl);
  padding-bottom: var(--baseline);
}

.clients-partners {
  .container {
    &:nth-child(1) {
      margin-bottom: var(--baseline);
    }

    &:nth-child(2) {
      background-color: var(--color-iron-300);
    }

    .grid {
      display: grid;
      column-gap: var(--gutter);

      a {
        align-items: center;
        display: flex;
        flex-direction: column;
        row-gap: var(--baseline);
        padding-left: 0px;
        border-left: 1px solid var(--color-iron-400);
        text-decoration: none;

        img {
          filter: grayscale(100%);
          mix-blend-mode: multiply;
          opacity: 0.75;
          padding-left: var(--space-lg);
          padding-right: var(--space-lg);
          transition-duration: var(--transition-duration);
          transition-property: filter, opacity;
          transition-timing-function: var(--transition-timing-function);
          object-fit: contain;

          &:hover {
            filter: grayscale(0);
            opacity: 1;
          }
        }

        &::before {
          content: "";
          display: block;
          height: calc(var(--space-xxl) - var(--baseline));
          width: auto;
          background-color: palegreen;
        }

        /* fill out the last row if there aren't enough items */
        &:nth-last-child(-n + 2) {
          &::after {
            content: "";
            display: block;
            height: calc(var(--space-xxl) * 2);
          }
        }

        @media (min-width: 40rem) {
          img {
            padding-left: var(--space-md);
            padding-right: 0px;
          }
        }

        @media (min-width: 64rem) {
          img {
            padding-left: var(--space-lg);
            padding-right: var(--space-lg);
          }
        }
      }
    }

    @media (min-width: 0) {
      div.grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (min-width: 40rem) {
      div.grid {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    div:last-child {
      position: relative;
      top: calc((var(--space-xxl) * -1) - 1rem);
      gap: 0px;
      display: flex;
      height: auto;
      justify-content: center;
    }
  }
}