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

.cooperationModel {
  display: flex;
  align-items: center;
  min-height: 32.625rem;
  padding: $hl-9 0;

  h1 {
    text-align: center;
    color: $white;
    margin-bottom: $hl-4;
  }
}

[data-role="campus"] [data-role="background"].cooperationModel:after {
  background: rgba(#AF5822, 60%);
}

[data-role="lecturer"] [data-role="background"].cooperationModel:after {
  background: rgba(#353858, 40%);

}

[data-role="science"] [data-role="background"].cooperationModel:after {
  background: rgba($blue-dark, 40%);
}

.inner {
  background: $white;
  border-radius: $radius;
  height: 100%;
  padding: $hl-7;

  h4 {
    color: $black;
    @include h4($medium);

    &:before {
      content: "";
      float: left;
      background: $blue;
      width: .375rem;
      height: 1.3125rem;
      margin: .4375rem $hl-10 .4375rem 0;
    }
  }

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

[data-role="campus"] .cooperationModel .inner h4:before {
  background: $orange;
}

[data-role="lecturer"] .cooperationModel .inner h4:before {
  background: $purple;

}

[data-role="science"] .cooperationModel .inner h4:before {
  background: $blue;
}

@media screen and (max-width: $wide) {
  .inner {
    padding: $hl-7 $hl-8;
  }
}

@media screen and (max-width: 767px) {
  .cooperationModel {
    background-size: cover !important;

    h1 {
      margin-bottom: $hl-8;
    }
  }

  .inner {
    padding: $hl-8 $hl-9;
  }
}