@import "@/styles/mixins.scss";
@import "@/styles/variables.scss";

.wrapper {
  margin: {
    bottom: 3rem;
  }
  padding: {
    bottom: 3rem;
  }

  &:not(&:last-child) {
    border: {
      bottom: 1px solid #e9eaee;
    }
  }

  display: flex;

  .left {
    width: 100%;
    max-width: 400px;
  }

  .right {
    .title {
      @include h2;
    }

    .content {
      margin: {
        top: 2rem;
      }
    }
  }
}

@media screen and (min-width: $mobile+1) {
  .wrapper {
    flex-direction: row;

    .right {
      margin: {
        left: 2rem;
      }
    }
  }
}

@media screen and (max-width: $mobile) {
  .wrapper {
    flex-direction: column;
    align-items: center;

    .right {
      margin: {
        top: 2rem;
      }
    }
  }
}