/* ===========================
   About Section - Desktop Layout
   Two-column grid: text on the left, animation on the right
=========================== */
.about-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "text anim";
  max-width: var(--max-content-width);
  width: 100%;
  gap: 40px;
  position: relative;
  align-items: start;
}

/* Text column in the "About" section */
.about-text-block {
  grid-area: text;
  min-width: 300px;
}

/* Animation column in the "About" section */
.about-animation-block {
  grid-area: anim;
  min-width: 300px;
  margin-top: 20px;
}

/* ===========================
   About Section - Mobile Layout
   Single column: text on top, animation below
=========================== */
@media (max-width: 900px) {
  .about-content {
    grid-template-columns: 1fr;
    grid-template-areas:
      "text"
      "anim";
    gap: 20px;
    justify-items: center;
  }

  /* Ensure blocks take full width on small screens */
  .about-text-block,
  .about-animation-block {
    min-width: 0;
    width: 100%;
  }

  /* Center the animation on mobile */
  .about-animation-block {
    margin-top: 0;
    display: flex;
    justify-content: center;
  }

  /* Resize and center the Lottie animation on mobile */
  .lottie-hero {
    display: block;
    width: auto;
    max-width: 320px;
    height: auto;
    margin: 0 auto;
  }
}