<div class="card">
  <h2 class="card__title">Not one more word tonight</h2>
  <p class="card__description">Between here and there, we'll put a distance the size of the ocean so now this heart can beat a skipping rhythm. As the cadence carries me, I almost drift away; far enough to forget that when it comes you cannot hesitate. And when found I will write an account and seal it in an envelope addressed to your last known residence.</p>
  <div class="card__actions">
    <a href="#" class="card__action card__action--primary">Sink</a>
    <a href="#" class="card__action card__action--secondary">Drown</a>
  </div>
</div>

body {
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
   font-weight: 300;
  background-color: #38473e;
}

.card {
  max-width: 240px;
  border: 1px solid #778191;
  border-radius: 20px;
  margin: 20px;
  padding: 20px;
  background-color: #ffffff;
}

.card__title {
  font-size: 21px;
  font-weight: 700;
  line-height: 30px;
}

.card__description {
  margin-top: 16px;
  font-size: 18px;
  line-height: 27px;
}

.card__actions {
  margin-top: 32px;
  display: flex;
  flex-direction: row;
}

@media screen and (max-width: 759px) {
  .card__actions {
    flex-direction: column;
    margin-top: 0;
  }
}

.card__action {
  margin-right: 20px;
  border: 1px solid #778191;
  border-radius: 20px;
  padding: 20px;
  text-decoration: none;
  font-size: 18px;
  font-weight: 700;
  line-height: 27px;
  color: #ffffff;
}

.card__action--primary {
  border-color: #18522c;
  background-color: #18522c;
}

.card__action--primary:hover {
  border-color: #207d40;
  background-color: #207d40;
}

.card__action--secondary {
  border-style: #778191;
  background-color: #778191;
}

.card__action--secondary:hover {
  border-color: #283242;
  background-color: #283242;
}