/* Hero Section */
  .hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 50px;
    /* padding: 50px 0; */
  }

  @media (min-width: 680px) {
    .hero {
      flex-direction: row;
      text-align: left;
      align-items: flex-start;
      justify-content: space-between;
    }
  }

  .hero-content {
    display: flex;
    flex-direction: column;
    gap: 28px;
    max-width: 400px;
  }

  .hero-images {
    position: relative;
    width: 80%;
    height: 300px;
  }