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

.educationStory {
  background: $grey-light;
  padding: $hl-2 0;
}

.inner {
  position: relative;
  text-align: center;
  color: $black;
  height: 100%;
  padding: $hl-4 $hl-7 $hl-6 $hl-7;

  i {
    position: absolute;
    left: $hl-9;
    top: $hl-9;
    text-align: center;
    color: rgba($purple, 20%);
    font-size: 5rem;
    min-width: 5rem;
    max-width: 5rem;
    min-height: 5rem;
    max-height: 5rem;
    line-height: 5rem;
  }

  .logo {
    display: inline-block;
    border-radius: 100%;
    width: 5rem;
    height: 5rem;
    overflow: hidden;
  }

  h3 {
    @include h3();
    margin: $hl-9 0 $hl-10 0;
  }

  p {
    @include p2();
    opacity: 0.6;
  }

  .description {
    text-align: left;
    @include p1();
    opacity: 0.8;
    margin-top: $hl-7;
  }
}

:global(.lecturer-story) {
  h1 {
    margin-bottom: $hl-3;
  }
}