.sample-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.sample-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 60px #233b3320;

  .poster {
    position: relative;
    height: 326px;
    display: block;
    overflow: hidden;
    background: #101c24;
    color: #fff;

    > img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .5s ease;
    }

    &:hover > img,
    &:focus > img {
      transform: scale(1.035);
    }
  }

  .shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #0a1b23e6 0 38%, transparent 80%);
  }

  .number {
    position: absolute;
    top: 21px;
    right: 23px;
    z-index: 5;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .15em;
  }

  .poster-copy {
    position: absolute;
    z-index: 5;
    bottom: 34px;
    left: 31px;

    small,
    b {
      display: block;
    }

    small {
      margin: 0 0 13px;
      color: var(--mint);
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .16em;
    }

    b {
      font-size: clamp(28px, 3.2vw, 40px);
      font-weight: 950;
      line-height: 1.18;
      letter-spacing: -.055em;
    }
  }

  .play-mark {
    position: absolute;
    right: 24px;
    bottom: 24px;
    z-index: 8;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border: 1px solid #ffffff66;
    border-radius: 50%;
    background: #ffffffea;
    box-shadow: 0 13px 26px #00000025;
    color: var(--ink);
    font-size: 16px;
    transition: transform .25s ease, background-color .25s ease;
  }

  .poster:hover .play-mark,
  .poster:focus .play-mark {
    transform: scale(1.09);
    background: var(--mint);
  }

  .card-body {
    padding: 25px 27px 28px;
  }

  .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;

    span {
      padding: 6px 9px;
      border-radius: 100px;
      background: #eaf4f0;
      color: #39715f;
      font-size: 10px;
      font-weight: 850;
    }
  }

  h3 {
    margin: 16px 0 9px;
    font-size: 22px;
    font-weight: 950;
    line-height: 1.45;
    letter-spacing: -.035em;
  }

  p {
    min-height: 55px;
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 650;
    line-height: 1.8;
  }

  .open-button {
    margin: 21px 0 0;
    padding: 13px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 8px;
    background: var(--ink);
    color: #fff;
    font-size: 13px;
    font-weight: 850;
    text-decoration: none;
    transition: background-color .25s ease, transform .25s ease;

    &:hover,
    &:focus {
      transform: translateY(-2px);
      background: #287963;
    }
  }
}