#about {
  .header {
    width: 90%;
    margin: auto;
    border-right: 1px solid white;
    border-bottom: 1px solid white;
    padding-top: 100px;
    position: relative;
    margin-bottom: 56px;

    .sectionText {
      text-align: center;
      color: white;
      font-size: 48px;
      margin-bottom: 24px;
    }

    .verticalLine {
      width: 1px;
      height: 56px;
      background-color: white;
      position: absolute;
      left: 0;
      top: 100%;
    }
  }

  .about {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 170px;

    .img {
      width: 596px;
      height: 500px;
      object-fit: cover;
      border-radius: 32px;
      filter: grayscale(1);
    }

    .info {
      p {
        color: white;
        max-width: 628px;
      }

      p:first-child {
        margin-top: 44px;
      }

      p+p {
        margin-top: 32px;
        margin-bottom: 56px;
      }
    }
  }
}

@media (width < 1480px) {
  #about {
    .about {
      grid-template-columns: repeat(2, 1fr);
      gap: 2rem;

      .img {
        width: 100%;
        height: initial;
        aspect-ratio: 1/1;
      }
    }
  }
}

@media (width < 850px) {
  #about {
    .about {
      display: flex;
      flex-direction: column;
      gap: 0rem;

      .img {
        height: initial;
        aspect-ratio: 19/10;
      }
    }

    /* a {
      display: flex;
      justify-content: center;
      width: 100%;
      text-align: center;
    } */
  }
}

@media (width < 400px) {
  #about {
    .header {
      padding-top: 16px;
      border-right: 0;
      width: 100%;
      margin-bottom: 16px;

      .sectionText {
        font-size: 18px;
        margin-bottom: 8px;
      }

      .verticalLine {
        display: none;
      }
    }

    .about {
      grid-template-columns: 1fr auto;
      gap: 16px;

      .img {
        width: 160px;
        height: 134px;
      }

      .info {
        width: 100%;

        /* p {} */
        p:first-child {
          margin-top: 16px;
          text-align: center;
          margin-bottom: 16px;
          font-weight: 200;
          font-size: 10px;
        }

        p+p {
          display: none;
        }

        a {
          padding: 0 8px;
          margin: auto;
          gap: 0;
          width: fit-content;
          height: 27px;
          font-size: 12px;
        }
      }
    }
  }
}