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

.educationValue {
  padding: 6.25rem 0;

  [data-role="list-content"] {
    margin-top: -5rem;

    [data-role="list-loop"] {
      text-align: center;
      min-width: calc(100% / 3);
      max-width: calc(100% / 3);
      margin-top: $hl-3;
    }
  }
}

.inner {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  max-width: 312px;
  margin: 0 auto;

  .logo {
    display: inline-block;
    //background: $grey;
    border-radius: 100%;
    width: 5rem;
    height: 5rem;
    margin: 0 auto;

    img {
      width: 100%;
      height: 100%;
    }
  }

  h3 {
    color: $black;
    @include h3();
    font-weight: $medium;
    margin-top: $hl-8;
  }

  h5 {
    color: rgba($black, 80%);
    @include h5($regular);
    margin-top: $hl-9;
  }
}

@media screen and (max-width: $desktop) {
  .educationValue {
    padding: $hl-3 0;

    [data-role="list-content"] [data-role="list-loop"] {
      min-width: 50%;
      max-width: 50%;
    }
  }
}

@media screen and (max-width: 767px) {
  .educationValue {
    [data-role="list-content"] [data-role="list-loop"] {
      min-width: 100%;
      max-width: 100%;
    }
  }
}