.friends {
  padding:52px 0 76px;
  background:var(--ink);
  color:var(--paper)
}
.friends h2 {
  font-size:40px;
  line-height:1.28
}
.friends__grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:40px;
  margin-top:44px
}
.friend {
  position:relative;
  aspect-ratio:400/534;
  border-radius:20px;
  overflow:clip;
  isolation:isolate
}
.friend__photo {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .9s var(--ease)
}
.friend::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(var(--ink),#191715cc 20%,#19171580 30%,transparent 40%);
  pointer-events:none;
  z-index:0
}
.friend__copy {
  position:absolute;
  left:24px;
  right:14px;
  top:24px;
  z-index:1
}
.friend__copy h3 {
  font-size:28px;
  line-height:1.28;
  white-space:nowrap
}
.friend__copy p {
  font-size:20px;
  line-height:1.3;
  font-weight:800;
  color:var(--red)
}
.friend__action {
  position:absolute;
  bottom:0;
  right:0;
  width:80px;
  height:40px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:20px 0 20px 0;
  background:linear-gradient(#a5261acc,var(--red));
  z-index:2
}
.friend:hover .friend__photo {
  transform:scale(1.035)
}
.friend__action:hover {
  background:#bf3022
}
.friend__action img {
  transition:transform .3s
}
.friend__action:hover img {
  transform:translateX(5px)
}
@media(max-width:1199px) and (min-width:768px) {
  .friends__grid {
    gap:24px
  }
  .friend__copy {
    left:16px;
    top:20px
  }
  .friend__copy h3 {
    font-size:21px
  }
  .friend__copy p {
    font-size:15px
  }
}
@media(max-width:767px) {
  .friends {
    padding:16px 0 48px
  }
  .friends h2 {
    font-size:30px;
    line-height:1.15;
    white-space:nowrap;
    letter-spacing:-.5px
  }
  .friends__grid {
    display:flex;
    flex-direction:column;
    gap:24px;
    margin-top:24px
  }
  .friend {
    width:100%;
    height:180px;
    aspect-ratio:auto
  }
  .friend--duplicate {
    display:none
  }
  .friend__photo {
    position:absolute;
    top:-102.61%;
    left:0;
    width:100%;
    height:265.15%;
    object-fit:fill
  }
  .friend--jason .friend__photo {
    top:-129.73%;
    height:259.59%
  }
  .friend::after {
    background:linear-gradient(var(--ink),#19171599 30%,transparent 60%)
  }
  .friend__copy {
    left:20px;
    right:20px;
    top:20px;
    text-align:right
  }
  .friend__copy h3 {
    font-size:22px;
    line-height:1.28
  }
  .friend--jahandar .friend__copy h3 {
    max-width:200px;
    margin-left:auto
  }
  .friend__copy p {
    font-size:16px;
    line-height:1.25;
    margin-top:6px
  }
  .friend__action {
    width:72px;
    height:44px;
    background:var(--red)
  }
}
@media(max-width:374px) {
  .friends h2 {
    font-size:26px
  }
}
@media(max-width:374px) {
  .friends h2 {
    white-space:normal;
    letter-spacing:0
  }
}