.about-hero {
  padding: 80px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.about-block {
  display: flex;
  align-items: center;
  gap: 40px;
}

.about-block.alt {
  flex-direction: row-reverse;
}

.about-text {
  flex: 1;
}

.about-image {
  flex: 1;
}

.about-image img {
  border-radius: 20px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

@media (max-width: 768px) {
  .about-block,
  .about-block.alt,
  .about-hero {
    flex-direction: column;
    text-align: center;
  }
}