
.card {
  -webkit-transition: background-color 0.25s;
  transition: background-color 0.25s;
  max-width: 72rem;
}
.card__content-wrapper {
  border: solid 1px var(--onyx);
  position: relative;
  min-height: 20rem;
  background-color: var(--white);
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
}
.card__content-wrapper::after {
  content: "";
  position: absolute;
  background-color: var(--copper);
  width: 100%;
  height: 100%;
  max-height: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}
.card__image-wrapper {
  top: 0;
  left: 0;
  overflow: hidden;
}
.card__image {
  height: inherit;
}
.card:hover .cta {
  color: inherit;
}
.card:hover .cta .icon {
  background-color: var(--white);
  color: var(--onyx);
  scale: 1.28;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.card .cta {
  color: var(--heritage-red);
  margin-top: auto;
}
.card .cta .icon {
  background: var(--medium-stone);
  border-color: transparent;
  color: var(--white);
}
.card:hover .card__content-wrapper {
  border-color: var(--copper);
  color: var(--white);
}
.card:hover .card__content-wrapper::after {
  max-height: 100%;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

/* --- variant: signpost-with-bg ------------------------------------------ */
.card--signpost-with-bg .card__image-wrapper {
  height: 100%;
  width: 100%;
}
.card--signpost-with-bg .card__image-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, left top, right top, color-stop(15.46%, rgba(0, 0, 0, 0.6)), color-stop(66.66%, rgba(0, 0, 0, 0))), -webkit-gradient(linear, left top, left bottom, color-stop(16.81%, rgba(0, 0, 0, 0)), color-stop(78.29%, rgba(0, 0, 0, 0.4)));
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.6) 15.46%, rgba(0, 0, 0, 0) 66.66%), linear-gradient(180deg, rgba(0, 0, 0, 0) 16.81%, rgba(0, 0, 0, 0.4) 78.29%);
}
.card--signpost-with-bg .card__content-wrapper {
  color: var(--white);
  border: none;
  background-color: transparent;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
}
.card--signpost-with-bg .cta {
  color: var(--white);
}
.card--signpost-with-bg .cta .icon {
  background: var(--white);
  color: var(--heritage-red);
}

/* --- variant: news ------------------------------------------------------ */
.card--news .card__image-wrapper {
  height: 22.8rem;
   margin-bottom:0;
}
.card--news .card__content-wrapper {
  border-color: var(--quartz);
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  min-height: 30.1rem;
}
.card--news .cta .icon {
  background: var(--white);
  color: var(--heritage-red);
  border-color: var(--heritage-red);
}
.card--news .cta:hover .icon {
  color: var(--onyx);
  border-color: transparent;
  scale: none;
}
.card--news:hover .cta .icon {
  scale: none;
  color: var(--onyx);
  border-color: transparent;
}

/* --- variant: case-study ------------------------------------------------ */
.card--case-study .card__image-wrapper {
  height: 100%;
  width: 100%;
}
.card--case-study .card__image-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, left top, right top, color-stop(15.46%, rgba(0, 0, 0, 0.6)), color-stop(66.66%, rgba(0, 0, 0, 0))), -webkit-gradient(linear, left top, left bottom, color-stop(16.81%, rgba(0, 0, 0, 0)), color-stop(78.29%, rgba(0, 0, 0, 0.4)));
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.6) 15.46%, rgba(0, 0, 0, 0) 66.66%), linear-gradient(180deg, rgba(0, 0, 0, 0) 16.81%, rgba(0, 0, 0, 0.4) 78.29%);
}
.card--case-study .card__content-wrapper {
  color: var(--white);
  border: none;
  background-color: transparent;
  min-height: 30.2rem;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
}
.card--case-study .card__content-wrapper::after {
  background-color: var(--white);
}
.card--case-study:hover .card__content-wrapper {
  color: var(--dark-stone);
  border: 1px solid var(--dark-stone);
}
.card--case-study:hover .cta {
  color: var(--heritage-red);
}
.card--case-study:hover .cta .icon {
  background: var(--medium-stone);
  border-color: transparent;
  scale: none;
}
.card--case-study:hover .cta__label {
  color: var(--heritage-red);
}
.card--case-study .card__title {
  letter-spacing: 0.09rem;
}
.card--case-study .card__tag {
  letter-spacing: 0.09rem;
}
.card--case-study .card__year {
  font-size: var(--cta-lg-fs);
  font-family: var(--font-heading);
  letter-spacing: 0.07rem;
}
.card--case-study .cta {
  color: var(--white);
}
.card--case-study .cta .icon {
  color: var(--white);
  background: var(--heritage-red);
}

/* --- variant: signpost-2x ----------------------------------------------- */
.card--signpost-2x .card__content-wrapper {
  max-width: 100%;
  min-height: 23.6rem;
  border: none;
}
.card--signpost-2x .card__content-wrapper p:has(+ .cta) {
  margin-bottom: 0;
}
.card--signpost-2x .card__title {
  letter-spacing: 0.09rem;
}
.card--signpost-2x .card__image-wrapper {
  height: 100%;
  max-height: 23rem;
  width: 100%;
}
.card--signpost-2x .card__image {
  height: inherit;
  max-height: 23rem;
}
.card--signpost-2x .cta {
  color: var(--onyx);
  font-size: var(--cta-fs);
  line-height: var(--cta-lh);
  letter-spacing: 0.15rem;
}
.card--signpost-2x .cta .icon {
  border-color: var(--heritage-red);
  background-color: transparent;
  color: var(--heritage-red);
}
.card--signpost-2x:hover .card__content-wrapper::after {
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}
.card--signpost-2x:hover .cta .icon {
  scale: none;
  border-color: transparent;
}

/* --- variant: related-link ---------------------------------------------- */
.card--related-link .card__image-wrapper {
  height: 26rem;
}
.card--related-link .card__content-wrapper {
  min-height: 18.9rem;
  border-color: transparent;
}
.card--related-link .cta {
  color: var(--onyx);
}
.card--related-link .cta--default .cta__label::after {
  background-color: var(--white);
}
.card--related-link .cta .icon {
  background: transparent;
  color: var(--copper);
  border-color: transparent;
}
.card--related-link .cta:hover .icon {
  border-color: transparent;
  scale: none;
  background: transparent;
}
.card--related-link:hover .cta .icon {
  scale: none;
  color: var(--white);
  border-color: transparent;
  background: transparent;
}
.card--related-link:hover .card__tag {
  color: var(--white);
}

/* --- variant: report-card ----------------------------------------------- */
.card--report-card {
  width: 39.2rem;
}
.card--report-card .card__image-wrapper {
  height: 22rem;
}
.card--report-card .card__content-wrapper {
  background-color: var(--copper);
  color: var(--white);
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  min-height: 22rem;
  border-color: transparent;
}
.card--report-card .cta {
  color: var(--white);
  margin-top: 0;
}
.card--report-card .cta__inner {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}
.card--report-card .cta .icon {
  background: transparent;
  color: var(--white);
  font-size: 1.8rem;
}
.card--report-card .cta:hover .cta__label {
  border-bottom: 1px solid var(--white);
}
.card--report-card .cta:hover .icon {
  border-color: transparent;
  scale: none;
  background: inherit;
}
.card--report-card:hover .cta .icon {
  scale: none;
  color: var(--white);
  background-color: inherit;
  border-color: transparent;
}

/* --- variant: video-card ------------------------------------------------ */
.card--video-card {
  margin-bottom: var(--sm-1);
}
.card--video-card .card__image-wrapper {
  max-height: 19.2rem;
  aspect-ratio: 1/0.5597;
  position: relative;
}
.card--video-card .card__image-wrapper::after {
  content: "";
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.5)));
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.card--video-card .card__image {
  max-height: inherit;
  aspect-ratio: inherit;
}
.card--video-card .card__video-cta {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
  z-index: 1;
}
.card--video-card .card__content-wrapper {
  min-height: auto;
  border: none;
}
.card--video-card .card__content-wrapper::after {
  display: none;
}
.card--video-card:hover .card__content-wrapper {
  color: var(--onyx);
}
.card--video-card:hover .card__video-cta {
  -webkit-transform: translate(-50%, -50%) scale(1.1);
      -ms-transform: translate(-50%, -50%) scale(1.1);
          transform: translate(-50%, -50%) scale(1.1);
}

/* --- breakpoints -------------------------------------------------------- */
@media (min-width: 768px) {
  .card--signpost-2x {
    max-width: 60.1rem;
  }
  .card--video-card {
    margin-bottom: 0;
  }
  .card--video-card .card__image-wrapper {
    max-height: 33.9rem;
    aspect-ratio: 1/0.56125;
  }
}
@media (min-width: 992px) {
  .card--signpost-2x .card__image-wrapper {
    max-width: 22.4rem;
    min-width: 22.4rem;
    height: 23.6rem;
    max-height: none;
  }
  .card--signpost-2x .card__image {
    max-height: none;
  }
  .card--signpost-2x .card__content-wrapper {
    -webkit-box-flex: 1;
        -ms-flex: auto;
            flex: auto;
  }
}
@media (min-width: 1200px) {
  .card__content-wrapper {
    min-height: 23.4rem;
  }
  .card--news .card__image-wrapper {
    height: 26rem;
  }
}
