.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

// GLOBAL VALUES IN SASS VARIABLES
$fontRoboto: "Roboto", sans-serif;
$fontVidaloka: "Vidaloka", serif;
$fontSizeMobile: 18px;
$fontSizeDesktop: 16px;
$colorBlue: #1c1b34;
$mediaMobile: 46.875rem;

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

/* General */
:root {
  /* Global variables */
  --GL-FONT-ROBOTO: #{$fontRoboto};
  --GL-FONT-VIDALOKA: #{$fontVidaloka};
  --GL-FONT-SIZE: #{$fontSizeMobile};
  --GL-BLUE: #{$colorBlue};

  @media (min-width: $mediaMobile) {
    --GL-FONT-SIZE: #{$fontSizeDesktop};
  }

  font-size: var(--GL-FONT-SIZE);
}

body {
  background-color: #cccccc;
  font-family: var(--GL-FONT-ROBOTO);
}

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

/* Buttons */
.btn {
  --btn-bgColor: #cccccc;
  --btn-bdColor: transparent;
  --btn-color: #ffffff;
  --btn-transition: all ease-in 150ms;

  &:hover {
    --btn-bgColor: transparent;
    --btn-bdColor: #cccccc;
    --btn-color: #cccccc;
    --btn-transition: all ease-out 300ms;
  }

  &--ok {
    --btn-bgColor: var(--GL-BLUE);

    &:hover {
      --btn-bdColor: var(--GL-BLUE);
      --btn-color: var(--GL-BLUE);
    }
  }

  &--no {
    --btn-bgColor: #f51711;

    &:hover {
      --btn-bdColor: #f51711;
      --btn-color: #f51711;
    }
  }

  background-color: var(--btn-bgColor);
  border: 0.125rem solid var(--btn-bdColor);
  border-radius: 0.313rem;
  color: var(--btn-color);
  cursor: pointer;
  font-size: 1rem;
  padding: 0.625rem 1.25rem;
  transition: var(--btn-transition);
}

/* Card */
.card {
  --card-flow: column;

  @media (min-width: $mediaMobile) {
    --card-flow: row;
  }

  background-color: #ffffff;
  display: flex;
  flex-flow: var(--card-flow);
  width: 80%;

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

    &_title {
      --title-font-size: 2.2rem;

      @media (min-width: $mediaMobile) {
        --title-font-size: 3rem;
      }

      color: #1c1b34;
      font: normal var(--title-font-size) var(--GL-FONT-VIDALOKA);
      line-height: 1;
      margin-bottom: 1.875rem;

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

    &_btns {
      margin-top: 2rem;

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

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

  img {
    width: 100%;
  }

  @media (min-width: $mediaMobile) {
    max-width: 740px;
  }
}