#about {
  display: flex;
  background: white;
  font-family: 'ClashDisplay', sans-serif;
  width: 100%;
  align-content: center;
  justify-content: center;
  padding-top: 5rem;
  padding-bottom: 10rem;

  @media (max-width: 1024px) {
    padding-top: 3rem;
    padding-bottom: 5rem;
  }

  .about-container {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 72%;
    max-width: 84rem;

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

    @media (max-width: 768px) {
      width: 85%;
    }

    .buffer {
      height: 20rem;
    }

    .intro {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5rem;

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

      .intro-text {
        padding-top: 2rem;
        padding-bottom: 2rem;
        padding-right: 2rem;
        font-size: 2.5rem;
        font-weight: bold;

        @media (max-width: 1024px) {
          font-size: 1.8rem;
          padding: 2rem;
        }

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

        .intro-text-title {
          letter-spacing: 0.2rem;
          display: flex;
          text-align: center;
          line-height: 0.1em;
          margin-bottom: 1.5rem;
          margin-top: 0.6rem;

          .horizontal-line {
            text-align: center;
            border-bottom: 1px solid black;
            line-height: 0.1em;
            width: 5rem;
            margin-left: 0.5rem;
            margin-right: 1rem;
          }

          b {
            font-size: 1rem;
          }
        }

        .align-left {
          @media (max-width: 1024px) {
            margin-right: 6rem;
          }

          @media (max-width: 768px) {
            margin-right: 3rem;
          }
        }

        .align-center {
          text-align: center;

          @media (max-width: 1024px) {
            margin-left: 3rem;
            margin-right: 3rem;
          }

          @media (max-width: 768px) {
            margin-left: 1.5rem;
            margin-right: 1.5rem;
          }
        }

        .align-right {
          text-align: right;

          @media (max-width: 1024px) {
            margin-left: 6rem;
          }

          @media (max-width: 768px) {
            margin-left: 3rem;
          }
        }
      }

      .intro-image {
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        padding: 2rem;
        font-size: 2.5rem;
        font-weight: bold;

        @media (max-width: 1024px) {
          order: 0;
          padding-top: 0;
        }

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