@import "styles/_variables";
@import "styles/mixins";

.wrapper {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  padding: 0;

  .inner {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    margin-top: 130px;

    > svg {
      width: 202px;
      height: 160px;
      margin-bottom: 48px;
    }

    h2 {
      font-size: 22px;
      font-weight: 500;
      line-height: 28px;
      color: var(--color-label);
    }

    p {
      max-width: 350px;
      margin: 0;
      margin-top: 12px;
      font-size: 15px;
      line-height: 22px;
      color: var(--color-label);
      text-align: center;
    }

    button {
      padding: 8px 10px;
      margin-top: 28px;
      color: white;
      background-color: var(--color-primary-7);
      border-radius: 8px;
      box-shadow: 0 0 1px var(--shadow-4), 0 0.5px 2px var(--shadow-5);
    }
  }

  @include sm-down {
    .inner {
      padding: 60px 20px 0 20px;
      margin-top: 0;

      h2 {
        text-align: center;
      }
    }
  }

  @include xs-down {
    .inner {
      svg {
        width: auto;
        height: auto;
        margin-bottom: 20px;
      }
    }
  }
}
