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

.card {
  flex: 0 0 100%;
}

.link {
  text-decoration: none;
  cursor: pointer;
}

.container {
  display: flex;
  padding: int.$spacing-4 int.$spacing-5 int.$spacing-4 int.$spacing-5; 
  background-color: #fff;
  border: 1px solid int.$politico-consumer-gray-line;
  gap: int.$spacing-2;
  flex-direction: column;
  height: 100%;

  @include int.shadow($size: "100");
}

.text {
  display: flex;
  flex-direction: column;
  text-overflow: ellipsis;
}

.comment {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  line-clamp: 5;
  overflow: hidden;
  max-height: 90px;
  font-size: 16px;
  line-height: 18px;

  @include int.font-family($family: "sans");
}

.attribution {
  display: flex;
  gap: int.$spacing-2;
}

.headshot {
  max-width: 100%;
  width: 42px;
  height: 42px;
  vertical-align: middle;
  border-radius: 50%;
}

.name {
  color: int.$politico-consumer-gray-text;
  text-transform: uppercase;
  align-self: center;
  letter-spacing: 1.56px;
  font-size: 10px;
  line-height: 14.4px; /* 120% */

  @include int.font-weight($weight: "bold");
  @include int.font-family($family: "sans");
}