#mission {
  > .container {
    width: 70%;
    margin-bottom: 8rem;

    @media (max-width: 1024px) {
      width: 90%;

      .content .title > p {
        margin: 0;
      }
    }

    .content {
      display: grid;
      gap: 2rem;
      margin-bottom: 2rem;

      .title {
        display: inline;
        gap: 1rem;
        align-items: center;
        justify-content: center;
        font-size: 2.5rem;
        
        img {
          height: 4rem;
          width: auto;
        }
      }

      .body {
        font-size: 1.125rem;
      }
    }

    .values {
      display: grid;
      gap: 2rem;
      margin-bottom: 2rem;
      grid-template-columns: 2fr 3fr;      
      
      .title {
        grid-column: 1 / span 2;
        font-size: 5rem;
        font-family: 'Gloock', sans-serif;

        p {
          margin-bottom: 1.25rem;
        }

        .highlight {
          font-family: 'EB Garamond', serif;
        }

        .underline {
          --underline-color: var(--purple-main);
          color: var(--underline-color);
        }
      }

      .images {
        grid-column: 1;
        grid-row: 2;
        height: 100%;
        display: grid;
        grid-template-rows: repeat(1, 1fr);
        gap: 2rem;
        justify-items: center;

        img {
          height: 100%;
          max-width: 100%;
          height: 100%;
          border-radius: 2rem;
          max-height: 650px;
          object-fit: cover;
        }
        
      }

      .body {
        grid-column: 2;
        grid-row: 2;
        font-size: 1.5rem;

        p {
          margin: 0;
        }
      }

      @media (max-width: 1024px) {
        grid-template-columns: 1fr;gap: 0;

        .body {
          grid-column: 1;
          margin-bottom: 1rem;
          font-size: 1.25rem;
        }

        .images {
          grid-row: 3;
        }
      }
    }
  }

  .foundation {
    background-color: var(--purple-main);
.container {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 1rem 2.5rem;
    color: white;
    padding: 2rem;
    grid-template-rows: auto auto;
    align-items: self-end;

    .title {
      grid-column: 1;
      grid-row: 1;
      font-size: 2.5rem;
      font-weight: 500;

      > * {
        margin: 0;
      }
    }

    .body {
      grid-column: 1;
      grid-row: 2;
      font-size: 1.5rem;
      align-self: baseline;
    }

    .video {
      grid-column: 2;
      grid-row: 1 / span 2;
      width: 100%;
      height: auto;
      min-height: 500px;
      overflow: hidden;
      border-radius: 2rem;
      box-shadow: 0 4px 11px 0 rgba(255, 255, 255, 0.33);
      align-self: normal;

      iframe {
        width: 100%;
        height: 100%;
      }
    }

    @media (max-width: 1024px) {
      grid-template-columns: 1fr;

      .video {
        grid-column: 1;
        grid-row: 3;
      }
    }
  }
  }
}