/* About Section Styles */

.section__about {
  position: relative;
  justify-content: flex-start;
  padding-top: 8rem;
}


/* Desktop hover effects for image movement */
@media (min-width: 768px) {

  .about__image {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    max-height: 40vh;
    width: auto;
    object-fit: contain;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
  }

  .about__image:hover {
    filter: brightness(1.1) saturate(1.2);
  }
}


/* Mobile styles for about section */
@media (max-width: 767px) {

  .about__image {
    width: 100vw;
    height: auto;
  }

  .section__about {
    min-height: 120vh;
    padding: 7rem 0 2rem 0;
  }

  .section__about .columns {
    margin-top: -1rem; /* close the gap btw img and cols */
  }
  
  .section__about .column p {
    font-size: var(--font-size-xs);
    position: relative;
    display: flex;
  }
  
  .section__about .column .subhead {
    font-size: var(--font-size-s);
    text-align: left;
    color: var(--bg);
  }
}