.footer {
  background-color: var(--color-downriver-400);

  .container~div {
    background-color: var(--color-downriver-300);
  }

  >.container {
    color: var(--color-white);
    position: static;

    >.grid {
      grid-template-columns: repeat(2, 1fr);
      column-gap: var(--gutter);
      row-gap: var(--baseline);
      display: grid;
      height: 100%;

      >.col {
        padding-left: calc(var(--gutter) - 1px);

        &:nth-child(1) {
          display: none;
          padding-top: var(--space-xxl);
          border-left: 1px solid var(--color-downriver-300);

          .logo {
            gap: 0px;
            display: flex;
            height: 100%;

            .wave1,
            .wave2 {
              fill: var(--color-downriver-300);
              position: relative;
              top: 3rem;
              transform-origin: center center;
            }
          }
        }

        &:nth-child(2),
        &:nth-child(3),
        &:nth-child(4) {
          padding-top: var(--space-xxl);
          /* padding-left: var(--gutter); */
          border-left: 1px solid var(--color-downriver-300);
        }

        &:nth-child(4) {
          display: none;

        }

        .nav {
          display: flex;
          flex-direction: column;
          row-gap: var(--baseline);
          padding-bottom: var(--space-lg);

          .item {
            color: inherit;
            cursor: pointer;
            display: block;
            flex-direction: column;
            gap: var(--baseline-sm);
            position: relative;
            text-decoration: none;
            user-select: none;
            white-space: nowrap;

            &:active {
              font-weight: 500;
            }
          }
        }

        >.flex {
          display: flex;
          flex-direction: column;
          row-gap: var(--baseline);

          h4 {
            color: var(--color-pastel-green-400);
            line-height: var(--line-height);
          }

          >div>ul {
            list-style-position: inside;
            list-style-type: none;

            >li>a {
              padding: 0.5rem 0px;
              display: inline-block;
              color: var(--color-white);
            }
          }

          >.socials {
            display: flex;
            font-size: var(--font-size-xl);
            line-height: 0;
            margin: 0px -0.5rem;

            >a {
              align-items: center;
              display: flex;
              height: 3rem;
              width: 3rem;
              justify-content: center;
              color: var(--color-white);

              >svg {
                height: 2.25rem;
              }
            }
          }

          &:last-child {
            padding-bottom: var(--space-lg);
          }
        }
      }
    }

    @media (min-width: 64rem) {
      .grid {
        grid-template-columns: repeat(3, 1fr);
        grid-column: span 3;

        .col:nth-child(1) {
          display: block;

          .logo {
            justify-content: flex-end;
            flex-direction: column;
          }
        }
      }

    }

    @media (min-width: 75rem) {
      .grid {
        grid-template-columns: repeat(4, 1fr);
        grid-column: span 4;

        .col:nth-child(4) {
          display: block;
        }
      }
    }
  }

  >div>.container {
    color: white;
    font-family: var(--font-family-mono);
    font-size: var(--font-size-sm);
    position: static;

    >.grid {
      grid-template-columns: repeat(2, 1fr);
      column-gap: var(--gutter);
      display: grid;
      row-gap: 0;

      & div:last-child {
        border-left: 1px solid var(--color-downriver-400);
      }

      >.grid {
        grid-template-columns: repeat(1, 1fr);
        column-gap: var(--gutter);
        display: grid;

        .col {
          &:first-child {
            padding-top: var(--space-xs);
          }

          padding-bottom: calc(var(--space-xs) -1px);
          padding-left: calc(var(--gutter) - 1px);
          border-left: 1px solid var(--color-downriver-400);
        }
      }
    }

    @media (min-width: 64rem) {
      .grid {
        grid-template-columns: repeat(1, 1fr);

        & div {
          border-left: none;
        }

        .grid {
          grid-template-columns: repeat(4, 1fr);

          .col {
            /* padding-bottom: calc(var(--space-xs) -1px); */
            padding-bottom: var(--space-xs);
            padding-top: var(--space-xs);
          }
        }
      }
    }
  }
}