.footer {
  background-color: var(--color-footer-bg);
  color: var(--color-footer-text);
  padding: var(--space-xxl) 0 var(--space-xl) 0;

  .container {
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--space-xxl);

    .grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-xl);

      @media (min-width: 768px) {
        grid-template-columns: repeat(6, 1fr);

        > div:first-child {
          grid-column: span 5;
        }
      }

      > div {
        &:first-child {
          h3 {
            font-size: var(--font-xl);
            font-weight: var(--font-medium);
            margin-bottom: var(--space-lg);
          }

          p {
            color: var(--color-footer-text);
          }
        }

        &:nth-child(2),
        &:nth-child(3),
        &:nth-child(4) {
          h3 {
            font-size: var(--font-lg);
            font-weight: var(--font-medium);
            margin-bottom: var(--space-md);
          }

          ul {
            list-style: none;
            padding: 0;
            margin: 0;

            li {
              margin-bottom: var(--space-xs);

              a {
                color: var(--color-footer-text);
                text-decoration: none;
                transition: color 0.3s ease;
                font-size: var(--font-sm);

                &:hover {
                  opacity: 0.8;
                }
              }
            }
          }
        }
      }

      .socials {
        display: flex;
        margin-top: var(--space-xl);

        > div {
          margin-right: var(--space-md);
        }

        svg {
          fill: var(--color-footer-text);
        }
      }
    }

    .copyright {
      margin-top: var(--space-lg);
      text-align: center;

      p {
        margin: 0;
        font-size: var(--font-xs);
      }
    }
  }
}