.social-card {
  position: relative;
  overflow: hidden;
}

.social-card__link {
  text-decoration: none;
  display: block;
  position: relative;
}

.node--type-sfa-social-post>.social-card__link::before {
  border: 1px solid transparent;
  border-width: 28px 48px;
  content: '';
  height: 0;
  position: absolute;
  right: 0;
  top: 0;
  -webkit-transition: border-color ease .3s, opacity ease .3s;
  transition: border-color ease .3s, opacity ease .3s;
  width: 0;
  z-index: 3;
}

.node--type-sfa-social-post>.social-card__link::after {
  background: url("../../../img/layout/ico-social-card.svg") left bottom no-repeat;
  content: '';
  height: 1.5rem;
  position: absolute;
  right: 0.5rem;
  top: 0.4375rem;
  width: 1.5rem;
  z-index: 4;
}

.social-card__link .button--video {
  cursor: pointer;
  left: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.social-card__link .button--video:hover {
  background-color: #fff;
}

.social-card__link:hover .button--video {
  background: #fff;
}

.social-card__link:hover .button--video::before {
  background-position: left bottom;
}

.social-card--content {
  background: #f2f5f7;
}

.social-card--content .social-card__link:hover::before {
  border-right-color: #1bacc0;
  border-top-color: #1bacc0;
}

.social-card--media .social-card__link::before {
  border-right-color: #000;
  border-top-color: #000;
  opacity: .5;
}

.social-card--media .social-card__link:hover::before {
  border-right-color: #1d2533;
  border-top-color: #1d2533;
  opacity: 1;
}

.social-card--facebook .social-card__link::after {
  background-position: -1.5rem bottom;
}

.social-card--facebook .social-card__link:hover::after {
  background-position: -1.5rem top;
}

.social-card--instagram .social-card__link::after {
  background-position: -4.5rem top;
}

.social-card--youtube .social-card__link::after {
  background-position: -6rem top;
}

.social-card__inner {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 4rem 2rem 2rem 2rem;
}

.social-card__date {
  color: #1d2533;
  font-weight: 700;
  font-family: "Montserrat", arial, sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5rem;
}

.social-card__author {
  color: #54657e;
  font-size: 0.875rem;
  line-height: 1.5rem;
}

.social-card__text {
  color: #54657e;
  margin-top: 1.5rem;
  position: relative;
  font-size: 0.875rem;
  line-height: 1.5rem;
}

.social-card__text::before {
  background: #1d2533;
  content: '';
  height: 0.0625rem;
  left: 0;
  margin-top: -0.0625rem;
  position: absolute;
  top: -0.75rem;
  width: 2rem;
}

.social-card__cover {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.social-card__image {
  display: none;
}

.social-card__inner,
.social-card__cover {
  height: 17rem;
}

@media screen and (min-width: 20em) {
  .social-card--youtube .social-card__cover {
    height: 10rem;
  }
}

@media screen and (min-width: 23.375em) {
  .social-card--youtube .social-card__cover {
    height: 11.75rem;
  }
}

@media screen and (min-width: 26.5em) {
  .social-card--youtube .social-card__cover {
    height: 13.375rem;
  }
}

@media screen and (min-width: 32.1875em) {
  .social-card--youtube .social-card__cover {
    height: 16.25rem;
  }
}

@media screen and (min-width: 40em) {
  .social-card--youtube .social-card__cover {
    height: 20rem;
  }
}

@media screen and (min-width: 48em) {
  .social-card--youtube .social-card__cover {
    height: 21rem;
  }

  .social-card__inner,
  .social-card__cover {
    height: 21rem;
  }
}

@media screen and (min-width: 80em) {
  .social-card--youtube .social-card__cover {
    height: 17.5rem;
  }

  .social-card__inner,
  .social-card__cover {
    height: 17.5rem;
  }
}