Promo Content

.promo-content {
  position: relative;
  overflow: hidden;
  padding-bottom: 6rem;
  padding-top: 7rem;
  background-size: contain, cover;
  background-position: 100vw top, center;
  background-repeat: no-repeat;

  &__inner {
    margin: 0 auto;
    padding: 0 3.2rem;
  }

  &__info {
    position: relative;
    z-index: 1;
    height: fit-content;
    margin-bottom: 2.4rem;
    h2 {
      color: $blue;
      font-family: $ef-font;
      font-weight: 700;
      font-size: 4.2rem;
      line-height: 4rem;
      letter-spacing: -0.01em;
    }

    p {
      font-family: $ef-font;
      font-weight: 400;
      font-size: 1.8rem;
      line-height: 2.4rem;
      letter-spacing: 0.02em;
      color: $color-interface-light;
      padding-bottom: 0.4rem;
      display: flex;
      flex-direction: column;
      &::before {
        content: '';
        display: block;
        border-bottom: 0.2rem solid $red;
        margin-top: 1.6rem;
        margin-bottom: 0.8rem;
        width: 6.4rem;
        height: auto;
      }
    }
  }

  &__social-links {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 2.5rem;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    width: 100%;

    .solid-blue {
      background-color: #1877f2;
    }

    .solid-blue2 {
      background-color: #1877f2;
    }

    .solid-red {
      background-color: #f00;
    }

    .primary-blue-gradient {
      background: linear-gradient(113.55deg, #011e41 -3.41%, #004f9f 84.96%);
    }

    > a {
      display: flex;
      flex-direction: column;
      justify-content: end;
      align-items: center;
      border-radius: 0.4rem;
      min-height: 12.2rem;
      text-align: center;
      color: $white;
      transition: all 0.3s ease-in-out;
      text-decoration: none;

      &:hover {
        box-shadow: 0 -3px 7px rgba(5, 5, 5, 0.25),
          0 9px 27px rgba(8, 8, 8, 0.56);
        background: $blue;
      }

      p {
        font-family: $ef-font;
        font-weight: 400;
        font-size: 1.6rem;
        line-height: 2.4rem;
        letter-spacing: -0.01em;
        display: flex;
        align-items: center;
        margin-bottom: 1rem;
        &::after {
          content: '';
          display: inline-block;
          background-image: url('./assets/images/chainlink-icon-white.svg');
          width: 1.2rem;
          height: 1.2rem;
          background-repeat: no-repeat;
          background-position: top;
          background-size: 100% 1.2rem;
          margin-left: 1rem;
        }
      }
    }

    img {
      width: 4.4rem;
      height: auto;
      background-repeat: no-repeat;
      margin-bottom: 2.1rem;
      border: none;
    }
  }

  @media screen and (min-width: $mq-medium) {
    &__inner {
      position: relative;
      max-width: 125.7rem;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    &__social-links {
      max-width: 49.2rem;
      > a {
        min-height: 13.8rem;
      }
    }

    &__info {
      max-width: 35.1rem;
      margin-bottom: 0;
    }
  }

  @media screen and (min-width: $mq-large) {
    background-position: center top, center;
  }

  @media screen and (max-width: $mq-medium) {
    // take promo image off the screen in tablet mode
    background-position: 100vw top, center;
  }
}