@font-face {
  font-family: 'Satoshi-Light';
  src: url("../fonts/Satoshi-Light.woff2") format("woff2"), url("../fonts/Satoshi-Light.woff") format("woff"), url("../fonts/Satoshi-Light.ttf") format("truetype");
  font-weight: 300;
  font-display: swap;
  font-style: normal; }

@font-face {
  font-family: 'Satoshi-Regular';
  src: url("../fonts/Satoshi-Regular.woff2") format("woff2"), url("../fonts/Satoshi-Regular.woff") format("woff"), url("../fonts/Satoshi-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
  font-style: normal; }

@font-face {
  font-family: 'Satoshi-Medium';
  src: url("../fonts/Satoshi-Medium.woff2") format("woff2"), url("../fonts/Satoshi-Medium.woff") format("woff"), url("../fonts/Satoshi-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
  font-style: normal; }

@font-face {
  font-family: 'Satoshi-Bold';
  src: url("../fonts/Satoshi-Bold.woff2") format("woff2"), url("../fonts/Satoshi-Bold.woff") format("woff"), url("../fonts/Satoshi-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
  font-style: normal; }

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit; }

html {
  font-size: 62.5%; }

html,
body {
  height: 100%; }

body {
  font-family: 'Satoshi-Regular', sans-serif;
  font-weight: 400;
  box-sizing: border-box; }

.container {
  display: grid;
  height: 100%;
  grid-template-rows: min-content 1fr min-content; }

.header {
  padding: 70px 120px 0; }
  @media only screen and (max-width: 80em) {
    .header {
      padding-right: 60px;
      padding-left: 60px; } }
  @media only screen and (max-width: 62.5em) {
    .header {
      padding: 38px 40px 0; } }
  @media only screen and (max-width: 23.75em) {
    .header {
      padding: 30px 30px 0; } }

.main {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template: repeat(2, 1fr)/repeat(2, 50%); }
  @media only screen and (max-width: 62.5em) {
    .main {
      grid-template: auto / 1fr; } }

.about {
  grid-row: 1;
  grid-column: 1;
  padding-left: 120px;
  display: grid;
  align-items: center; }
  @media only screen and (max-width: 80em) {
    .about {
      padding-right: 0;
      padding-left: 60px; } }
  @media only screen and (max-width: 62.5em) {
    .about {
      grid-row: 2;
      grid-column: 1 / -1;
      justify-content: center;
      background: #f94d17;
      padding: 20px 40px 40px; } }
  @media only screen and (max-width: 23.75em) {
    .about {
      padding: 20px 30px 40px; } }
  .about__wrapp {
    max-width: 520px;
    width: 100%; }
    @media only screen and (max-width: 62.5em) {
      .about__wrapp {
        max-width: 380px; } }
    .about__wrapp--title {
      font-family: 'Satoshi-Light';
      font-size: 48px;
      line-height: 104%;
      letter-spacing: -0.02em;
      color: #353535;
      margin-bottom: 30px;
      padding-right: 42px; }
      @media only screen and (max-width: 62.5em) {
        .about__wrapp--title {
          font-size: 24px;
          margin-bottom: 15px;
          color: #ffffff;
          padding-right: 0;
          max-width: 251px; } }
      .about__wrapp--title span {
        font-family: 'Satoshi-Bold', sans-serif; }
    .about__wrapp--description {
      font-family: 'Satoshi-Regular';
      font-size: 16px;
      line-height: 1.375;
      letter-spacing: -0.02em;
      color: #353535;
      padding: 0 14px;
      border-left: 1px solid #f94d17; }
      @media only screen and (max-width: 62.5em) {
        .about__wrapp--description {
          font-size: 14px;
          padding: 0;
          color: #ffffff;
          border-left: none; } }

.yummsprint {
  position: relative;
  grid-row: 1 / span 2;
  grid-column: 2;
  display: grid;
  align-items: center; }
  @media only screen and (max-width: 62.5em) {
    .yummsprint {
      grid-row: 1 / -1;
      grid-column: 1;
      justify-content: center; } }
  .yummsprint img {
    display: inline-block;
    position: relative;
    max-width: 650px;
    width: 100%; }
  .yummsprint::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50%;
    background: #f94d17;
    border-top-right-radius: 12px; }
    @media only screen and (max-width: 62.5em) {
      .yummsprint::before {
        border-top-left-radius: 12px; } }

.app {
  position: relative;
  grid-row: 2;
  grid-column: 1;
  background: #f94d17;
  border-top-left-radius: 12px;
  padding-left: 120px;
  display: grid;
  align-items: center;
  background: #f94d17; }
  @media only screen and (max-width: 80em) {
    .app {
      padding-right: 0px;
      padding-left: 60px; } }
  @media only screen and (max-width: 62.5em) {
    .app {
      grid-row: 3;
      grid-column: 1 / -1;
      justify-content: center;
      background: #353535;
      border-top-right-radius: 12px;
      padding: 40px 40px 0; }
      .app::before {
        content: '';
        position: absolute;
        z-index: -1;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: #f94d17; } }
  @media only screen and (max-width: 23.75em) {
    .app {
      padding: 40px 30px 0; } }
  .app__wrapp {
    max-width: 520px;
    width: 100%; }
    @media only screen and (max-width: 62.5em) {
      .app__wrapp {
        max-width: 380px; } }
    .app__wrapp--title {
      font-family: 'Satoshi-Regular';
      font-size: 32px;
      line-height: 1.125;
      letter-spacing: -0.02em;
      color: #ffffff;
      max-width: 380px;
      margin-bottom: 30px; }
      @media only screen and (max-width: 62.5em) {
        .app__wrapp--title {
          margin-bottom: 24px;
          max-width: 251px; } }
      @media only screen and (max-width: 62.5em) {
        .app__wrapp--title {
          font-size: 24px; } }
    .app__wrapp--description {
      font-family: 'Satoshi-Regular';
      font-size: 16px;
      line-height: 1.375;
      letter-spacing: -0.02em;
      color: #ffffff;
      max-width: 350px; }
      @media only screen and (max-width: 62.5em) {
        .app__wrapp--description {
          font-size: 14px;
          max-width: 100%; } }
    .app__wrapp--btns {
      display: grid;
      grid-auto-flow: column;
      column-gap: 10px;
      margin-top: 34px; }
      @media only screen and (max-width: 62.5em) {
        .app__wrapp--btns {
          grid-auto-flow: row;
          justify-content: center;
          row-gap: 16px; } }
      .app__wrapp--btns .btn {
        max-width: 240px;
        border: 1px solid #f2f3f6;
        border-radius: 8px;
        display: flex;
        align-items: center;
        gap: 20px;
        padding: 12px 20px;
        text-decoration: none;
        font-weight: 700;
        font-size: 17px;
        line-height: 1; }
        @media only screen and (max-width: 80em) {
          .app__wrapp--btns .btn {
            font-size: 16px;
            gap: 12px; } }
        .app__wrapp--btns .btn img {
          display: inline-block;
          width: auto;
          height: 30px; }
        .app__wrapp--btns .btn span > * {
          display: block; }
          .app__wrapp--btns .btn span > *:nth-of-type(1) {
            font-family: 'Satoshi-Light'; }
          .app__wrapp--btns .btn span > *:nth-of-type(2) {
            font-family: 'Satoshi-Bold'; }
      .app__wrapp--btns__a {
        color: #f2f3f6; }
      .app__wrapp--btns__g {
        color: #353535;
        background: #f2f3f6; }

@media only screen and (max-width: 90em) {
  .footer {
    background: #f94d17; } }

@media only screen and (max-width: 62.5em) {
  .footer {
    background: #353535; } }

.footer__wrapp {
  background: #353535;
  border-radius: 12px 12px 0px 0px;
  padding: 50px 120px;
  display: grid;
  grid-auto-flow: column;
  grid-column-gap: 24px; }
  @media only screen and (max-width: 80em) {
    .footer__wrapp {
      padding-right: 60px;
      padding-left: 60px; } }
  @media only screen and (max-width: 62.5em) {
    .footer__wrapp {
      padding: 50px 40px;
      grid-column-gap: 12px; } }
  @media only screen and (max-width: 23.75em) {
    .footer__wrapp {
      padding: 40px 30px; } }
  .footer__wrapp--left {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min-content;
    grid-column-gap: 10px;
    text-align: left; }
    @media only screen and (max-width: 23.75em) {
      .footer__wrapp--left {
        grid-column-gap: 6px; } }
    .footer__wrapp--left span {
      font-style: normal;
      font-weight: 400;
      font-size: 9px;
      line-height: 12px;
      text-align: left;
      color: rgba(242, 242, 242, 0.7);
      white-space: nowrap; }
  .footer__wrapp--right {
    text-align: right; }
    .footer__wrapp--right span {
      font-style: normal;
      font-weight: 400;
      font-size: 9px;
      line-height: 12px;
      text-align: right;
      color: rgba(242, 242, 242, 0.7); }