@import "@/styles/variables";
@import "@/styles/mixins";

.founderAndStaffStory {
  padding-bottom: 2.5rem;
  white-space: pre-line;
  color: $black;

  p {
    @include p1();
    color: $font-color-8;
    padding-top: 1.5rem;
  }
}

.story {
  padding-top: 6.25rem;
  display: flex;

  .storyImage {
    height: 14.875rem;
    width: 18.875rem;
    padding: 0 2rem;
    border-radius: 50%;
    object-fit: cover;
  }

  .founderBody {
    padding-left: 2rem;
  }

  .staffBody {
    padding-right: 2rem;
  }
}

@media screen and (max-width: $mobile) {
  .story {
    .founderBody {
      padding-left: 0;
      padding-top: 2rem;
    }

    .storyImage {
      padding: 0;
      width: 14.875rem;
    }

    .staffBody {
      padding-right: 0;
      padding-top: 2rem;
    }
  }

  .founderStory {
    flex-direction: column;
  }

  .staffStory {
    flex-direction: column-reverse;
  }
}