Home Social: Follow

// home social section
.home-social-follow {
  margin-top: rem(90);
  background-color: $off-white;
  @extend %outer-pad-x;
  // @extend %full-width-component;
  display: flex;
  flex-direction: column-reverse;
  position: relative;
  @include media-breakpoint-up(xl) {
    flex-direction: row;
    align-items: center;
    padding-right: 0;
    padding-bottom: rem(40);
    padding-left: rem(82);
  }
  &:before {
    @include media-breakpoint-up(xxl) {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      width: 150vw;
      left: 50%;
      transform: translateX(-50%);
      z-index: -1;
      background-color: $off-white;
      pointer-events: none;
    }
  }
  & + .paragraph-widget--call-to-action--small {
    margin-top: 0;
  }

  .outer-pad & {
    margin-inline: rem(-36);

    @include media-breakpoint-up(md) {
      margin-inline: rem(-70);
    }

    @include media-breakpoint-up(xl) {
      margin-inline: rem(-190) rem(-298);
    }
  }
}

.home-social-follow__headline-icons-wrap {
  margin: rem(40) 0 rem(26);
  @include media-breakpoint-up(xl) {
    flex: 0 1 auto;
    width: 35%;
    margin: 0;
    padding-top: rem(10);
  }
  @include media-breakpoint-up(xxl) {
    flex: 0 1 auto;
    width: 25%;
  }
}

.home-social-follow__headline {
  color: $iastate-red;
  width: 80%;
  padding: 0;
  margin-bottom: rem(20);
  @include media-breakpoint-up(xl) {
    width: auto;
    padding-right: rem(20);
  }
  @include media-breakpoint-up(xxl) {
    width: 90%;
  }
}

.home-social-follow__social-links {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: rem(27) 0;
  @include media-breakpoint-up(md) {
    justify-content: flex-start;
  }
  @include media-breakpoint-up(xl) {
    margin: 0;
  }
  li {
    margin-right: rem(15);
    a {
      border: rem(2) solid $iastate-maroon;
      border-radius: 50%;
      width: rem(52);
      height: rem(52);
      display: flex;
      align-items: center;
      justify-content: center;
      color: $white;
      transition: 0.3s background-color ease-in-out;
      &:hover {
        background-color: $iastate-maroon;
        svg {
          color: $white;
        }
      }
      svg {
        color: $iastate-maroon;
        font-size: rem(25);
        transition: 0.3s color ease-in-out;
      }
    }
  }
}

.home-social-follow__images-wrap {
  position: relative;
  @include media-breakpoint-up(md) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
  @include media-breakpoint-up(xl) {
    flex: 0 1 auto;
    width: 65%;
  }
  @include media-breakpoint-up(xxl) {
    flex: 0 1 auto;
    width: 75%;
  }
  &:before,
  &:after {
    content: "";
    position: absolute;
    top: 0;
    left: rem(-36);
    right: rem(-36);
    background-color: $white;
    height: rem(48);
    @include media-breakpoint-up(md) {
      left: rem(-70);
      right: rem(-70);
    }
    @include media-breakpoint-up(xl) {
      width: 150vw;
      left: -50vw;
      height: rem(18);
    }
    @include media-breakpoint-up(xxl) {
      height: rem(27);
    }
  }
  &:after {
    display: none;
    @include media-breakpoint-up(md) {
      background-color: $off-white;
    }
    @include media-breakpoint-up(xl) {
      display: block;
      top: initial;
      bottom: 0;
    }
  }
}

.home-social-follow__images-image {
  @extend %responsive-img;
  box-shadow: 0 rem(13) rem(16) rgba($black, 0.2);
  position: relative;
  z-index: 1;
  @include media-breakpoint-up(md) {
    flex: 1 1 0;
    margin-right: rem(15);
  }
  &:nth-child(2),
  &:last-child {
    display: none;
    @include media-breakpoint-up(md) {
      display: block;
    }
  }
  &:last-child {
    @include media-breakpoint-up(md) {
      margin-right: 0;
    }
  }
  &:before {
    padding-top: 100%;
  }
}

.feature-with-large-image {
  .home & {
    @extend %full-width-component;
    margin-bottom: rem(60);
  }
}