.wrap
  .card
    img(src="https://placeimg.com/400/480/nature")
    .card-content
      h1.card-content-title Title is Lorem ipsum
      p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur odio arcu, venenatis sit amet eros id, lobortis iaculis nulla. Duis sagittis euismod auctor. Morbi ac odio orci.
      .card-content-btns
        button.btn.btn--ok(type="button") Yes
        button.btn.btn--no(type="button") No

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* General */
:root {
  font-size: 18px;
  @media (min-width: 46.875rem) {
    font-size: 16px;
  }
}

body {
  background-color: #cccccc;
  font-family: "Roboto", sans-serif;
}

.wrap {
  aling-itens: center;
  display: flex;
  height: 100%;
  justify-content: center;
  padding-top: 2rem;
}

/* Buttons */
.btn {
  background-color: #cccccc;
  border: 0.125rem solid transparent;
  border-radius: 0.313rem;
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
  padding: 0.625rem 1.25rem;
  transition: all ease-in 150ms;

  &:hover {
    background-color: transparent;
    border-color: #cccccc;
    color: #cccccc;
    transition: all ease-out 300ms;
  }

  &--ok {
    background-color: #1c1b34;
    &:hover {
      border-color: #1c1b34;
      color: #1c1b34;
    }
  }

  &--no {
    background-color: #f51711;
    &:hover {
      border-color: #f51711;
      color: #f51711;
    }
  }
}

/* Card */
.card {
  background-color: #ffffff;
  display: flex;
  flex-flow: column;
  width: 80%;

  &-content {
    font-size: 0.875rem;
    padding: 1.25rem;

    &-title {
      color: #1c1b34;
      font: normal 2.2rem "Vidaloka", serif;
      line-height: 1;
      margin-bottom: 1.875rem;

      &:after {
        background-color: #1c1b34;
        content: "";
        display: block;
        height: 0.313rem;
        margin-top: 0.75rem;
        width: 5rem;
      }

      @media (min-width: 46.875rem) {
        font-size: 3rem;
      }
    }

    &-btns {
      margin-top: 2rem;

      .btn:first-child {
        margin-right: 0.5rem;
      }
    }

    @media (min-width: 46.875rem) {
      font-size: 1rem;
    }
  }

  img {
    width: 100%;
    height: 50vw;
    @media (min-width: 46.875rem) {
      height: auto;
    }
  }

  @media (min-width: 46.875rem) {
    flex-flow: row;
    max-width: 740px;
  }
}