.about {
  background-color: var(--color-gray);
  display: flex;
  align-items: center;
  max-height: 100%;
}

.about-text {
  display: flex;
  justify-content: center;
  flex-direction: column;
  color: var(--color-white);
  width: 50%;
}

.about-text > h2 {
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
}

.about-image > img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25rem;
  height: 25rem;
  border-radius: 50%;
}

@media (max-width: 1200px) {
  .about-text {
    font-size: clamp(0.7rem, 2vw, 1.4rem);
    width: 95vw;
    padding: var(--space-md);
  }

  .about-image {
    display: none;
  }
}

@media (max-width: 768px) {
  .about-text {
    font-size: clamp(0.7rem, 2vw, 1.4rem);
    width: 95vw;
    line-height: 1.75;
  }
}

@media (max-width: 480px) {
  .about-text {
    font-size: clamp(0.7rem, 2vw, 1.4rem);
    width: 95vw;
  }
}

@media (max-width: 200px) {
  .about-text {
    display: none;
  }

  .about > .hidden {
    visibility: visible;
    opacity: 1;
  }
}