@use "../../../../styles/int.scss";

.link {
  color: int.$warmgray-100;

  @include int.election-text-link;
}

.cover-art-container {
  display: block;
  position: relative;
  width: 100%;
  padding-top: 66.667%; /* 1:1.5 Aspect Ratio */
  overflow: hidden;
  
  img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.headline {
  margin: int.$spacing-2 0;

  @include int.title($size: "200", $weight: "bold", $outlet: "interactive");

  @include int.container-at-least("sm") {
    @include int.title($size: "300", $weight: "bold", $outlet: "interactive");
  }

  @include int.container-at-least("xl") {
    @include int.title($size: "400", $weight: "bold", $outlet: "interactive");
  }
}

.byline-container {
  color: int.$warmgray-60;
  text-transform: uppercase;

  @include int.overline();
}

@include int.customize-component(".byline-container") {
  .int-style.int-style-Byline {
    line-height: 16px;
  }
}