main {
  section#about-me {
    background-color: #e9e2db;
    padding: 2rem 2rem 10rem 2rem;
    height: fit-content;

    .widthContainer {
      position: relative;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      align-items: center;
      gap: 6rem;
      margin-top: 2rem;

      .imageContainer {
        width: 500px;
        height: 600px;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          height: 100%;
          width: 100%;
          object-fit: cover;
          animation: fadeIn ease-in 1;
          animation-fill-mode: forwards;
          animation-duration: 0.8s;
        }
      }

      article {
        width: 50%;
        height: 600px;
        display: flex;
        flex-direction: column;

        h1 {
          font-size: 55px;
          margin-bottom: 1rem;
          color: black;
          text-transform: uppercase;
          font-weight: 100;
          animation: left-to-right-fade-in 0.5s ease-in;
          -webkit-mask-repeat: no-repeat;
        }

        p {
          font-size: 19px;
          line-height: 2rem;
          text-align: justify;
          color: rgb(49, 43, 29);
          animation: left-to-right-fade-in 0.5s ease-in;
          -webkit-mask-repeat: no-repeat;
        }

        .author {
          color: black;
          font-size: 32px;
          font-family: "Brittany Signature", sans-serif;
          text-align: right;
          margin-top: 2rem;
          margin-right: 10rem;
          white-space: nowrap;
          animation: left-to-right-fade-in 0.5s ease-in;
          -webkit-mask-repeat: no-repeat;
        }

        .socials {
          margin-top: 5px;

          a {
            font-size: 30px;
            color: rgb(49, 43, 29);
            transition: all 0.2s ease-in-out;
          }

          a:hover {
            color: #858585;
          }
        }
      }
    }
  }
}

@media (max-width: 1220px) {
  main {
    section#about-me {
      .widthContainer {
        justify-content: center !important;

        article {
          width: 83%;
        }
      }
    }
  }
}

@media (max-width: 625px) {
  main {
    section#about-me {
      height: 1600px;
    }
  }
}

@media (max-width: 525px) {
  main {
    section#about-me {
      height: 1700px;
    }
  }
}

@media (max-width: 475px) {
  main {
    section#about-me {
      height: 1800px;
    }
  }
}

@media (max-width: 438px) {
  main {
    section#about-me {
      height: 1950px;
    }
  }
}

@media (max-width: 412px) {
  main {
    section#about-me {
      height: 2100px;
    }
  }
}