footer {
  --background-color: var(--blue-background);

  background-color: var(--background-color);
  border-radius: 2.5rem 2.5rem 0 0;
  box-shadow: 0 3px 11px rgba(0, 0, 0, 0.33);

  .content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 4rem 2rem;

    .social {
      grid-column: 2;
      text-align: right;
      display: flex;
      justify-content: flex-end;
      gap: 1rem;

      a {
        background-color: black;
        color: white;
        width: 1.5rem;
        height: 1.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 100vmax;
        text-decoration: none;
      }
    }

    .images {
      grid-column: 1 / span 2;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-flow: column;
      gap: 1rem;
      align-items: flex-end;
      justify-content: space-between;
      padding-top: 4rem;

      img:first-child {
        width: 80%;
      }

      img {
        max-width: 100%;
      }

      @media (max-width: 1024px) {
        &.images {
          grid-template-columns: 1fr 1fr;
          gap: 4rem;
          align-items: center;

          img {
            max-width: 100%;
            width: 100%;
          }
        }
      }
    }

    .copyright {
      grid-column: 1 / span 2;
      text-align: left;
      padding-top: 4rem;
    }
  }
}

#contact {
  --font-color: #17E682;
  padding-block: 4rem;

  .container {
    display: grid;
    justify-content: center;
  }

  .content {
    padding-block: 4rem;
    display: flex;
    align-items: center;
    gap: 1rem;

    .content__text {
      display: inline;
      justify-content: center;
      align-items: center;
      color: var(--font-color);
      font-weight: 500;
      font-size: 2rem;
      text-decoration: none;
      text-shadow: 0 1px 1.8px rgba(0, 0, 0, 0.33);
    }

    a {
      color: var(--font-color);
    }

    @media (max-width: 1024px) {
      .content__text {
        font-size: 1.5rem;
      }
    }
  }
}