@import "../../../src/style/front-end/overides/colors";
@import "../../../src/style/front-end/overides/variables";
@import "../../../node_modules/bulma/sass/utilities/mixins.sass";

.purdue-home-teritary-hero {
  .section {
    .container {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
  &__header.second-level-page-heading {
    max-width: 950px;
    margin-bottom: 1.875rem;
    overflow: hidden;
    @include mobile {
      margin-bottom: 1.5rem;
    }
  }
  &__content {
    max-width: 950px;
    font-size: 1.25rem;
    @include mobile {
      font-size: 1rem;
    }
    p {
      text-align: center;
      font-size: inherit;
      font-weight: 500;
    }
  }
  &__cards {
    margin-top: 4rem;
    width: 100%;
    @include mobile {
      margin-top: 2.5rem;
    }
    .purdue-home-cta-card .image {
      img {
        transition: 0.3s ease;
      }

      &:after {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
      }
    }
    .flex-container--align-bottom {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 2.25rem 7rem 2.25rem 3.25rem;
      @include touch {
        padding: 1rem 4.25rem 1rem 1.5rem;
      }
      &:after {
        content: "";
        background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='104.253572px' height='104.253572px' viewBox='0 0 104.253572 104.253572' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3Earrow_circle_icon%3C/title%3E%3Cg id='Desktop' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='arrow_circle_icon' transform='translate(52.1268, 52.1268) rotate(40) translate(-52.1268, -52.1268)translate(15.1268, 15.1268)' stroke='%23cfb991' stroke-width='4'%3E%3Cg id='Group-3' transform='translate(0, 0)'%3E%3Ccircle id='Oval-Copy' transform='translate(37, 37) rotate(135) translate(-37, -37)' cx='36.9999977' cy='36.9999977' r='25.1629493'%3E%3C/circle%3E%3Cg id='Arrow-Copy-3' transform='translate(27.7199, 21.7701)' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='9.52771771' y1='2.99227577' x2='9.56560625' y2='27.0777404' id='Path-6' transform='translate(9.5467, 15.035) rotate(50) translate(-9.5467, -15.035)'%3E%3C/line%3E%3Cpolyline id='Path-5' transform='translate(14.2315, 11.1834) rotate(50) translate(-14.2315, -11.1834)' points='4.73086087 17.2295253 14.1515077 5.10747085 23.7320575 17.2593992'%3E%3C/polyline%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        height: 90px;
        width: 90px;
        background-repeat: no-repeat;
        background-size: cover;
        right: 0;
        position: absolute;
        bottom: 0;
        transition: 0.3s ease;
        @include mobile {
          height: 70px;
          width: 70px;
        }
      }
    }
  }
  &__card-title {
    color: $white;
    font-family: $acumin-pro;
    font-size: 3.875rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 0.9;
    @include until-widescreen {
      font-size: 2.5rem;
      margin-bottom: 0.8rem !important;
    }
    @include touch {
      font-size: 2rem;
      margin-bottom: 0.8rem !important;
    }
    @include mobile {
      font-size: 2.5rem;
      margin-bottom: 0.8rem !important;
    }
  }
  &__card-subtext {
    color: $white;
    font-family: $acumin-pro;
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.5;
    @include touch {
      font-size: 1rem;
    }
  }
  .purdue-home-cta-card:hover {
    .image img {
      scale: 1.1;
    }
    .flex-container--align-bottom {
      &:after {
        transform: translateX(3px);
      }
    }
  }
  ul.purdue-home-button-list {
    margin-top: 2.5rem;
    padding-left: 0;
  }
}
