@import "../base/variables.less";
@import "../base/mixins.less";

.recipe {
  .recipe-content {
    margin-top: 40px;
    display: flex;
    flex-flow: row wrap;

    .recipe-content-left {
      width: 40%;
      float: left;

      img {
        max-width: 100%;
      }

      .recipe-information {
        background: @colored-2;
        margin-top: 20px;
        padding: 30px;

        h2 {
          margin: 0 0 20px 0;
          padding: 0;

          color: #fff;
          font-size: 24px;
        }

        p {
          margin: 0;

          color: #fff;
          text-align: left;
        }
      }

      @media @mobile {
        order: 2;
        width: 100%;

        text-align: center;
      }
    }

    .recipe-content-right {
      width: 55%;
      float: right;

      margin-left: 5%;

      h2 {
        font-size: 24px;
        margin-bottom: 10px;
      }

      @media @mobile {
        order: 1;
        width: 100%;

        margin-left: 0;
        margin-bottom: 40px;
      }
    }
  }
}