<template>
  <div class="article" v-html="context">
  </div>
</template>

<script setup>
const props = defineProps({
  context: String
})
</script>

<style lang="scss" scoped>
.article {

  padding: 33px 0;
  font-family: 'Raleway';
  font-style: normal;

  ::v-deep p {
    font-weight: 400;
    font-size: 14Px;
    line-height: 21Px;
    color: rgba(0, 0, 0, 0.5);
  }

  ::v-deep h2 {
    font-family: 'Libre Bodoni';
    font-style: normal;
    font-weight: 400;
    font-size: 18Px;
    line-height: 24Px;
    color: #000000;
    margin: 36px 0 12px;
  }

  @media screen and (min-width: 1440Px) and (max-width: 100vw) {
    padding: 56px 160px;

    p {
      font-size: 16Px;
    }

    h2 {
      font-size: 24Px;
      line-height: 30Px;
      margin-top: 20px;
    }
  }

  @media screen and (min-width: 0Px) and (max-width: 415Px) {
    padding: 24px 0;
  }
}
</style>