Project-XR-website/docs/.vuepress/components/About.vue

<template>
  <section id="about" class="grid-container">
    <div class="TextContainer grid-item">
      <h1>About Project XR</h1>
      <p>
        Lorem ipsum dolor sit amet. Cum dolorem blanditiis sit enim officia et voluptates aliquam. 
        Eum maxime eligendi et perferendis vitae non vitae consequatur.
      </p>
    </div>
    <div class="ImgContainer grid-item">
      <img src="/img/DemoFoto.png" alt="Demo Image" id="DemoImg" />
    </div>
  </section>
</template>

<script>
export default {
  name: 'about',
};
</script>

<style scoped>

.grid-container {
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 20px;
  align-items: start;
  margin: 10% 0;
  overflow: hidden;
}

.grid-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Text Container Styling */
.TextContainer {
  padding: 10%;
}

.TextContainer h1 {
  /* font-size: 2.5rem; */
  margin-bottom: 20px;
}

.TextContainer p {
  /* font-size: 1.2rem; */
  line-height: 1.6;
}

/* Image Container Styling */
.ImgContainer {
  display: flex;
  justify-content: center;
  align-items: center;
}

.ImgContainer #DemoImg {
  width: 80%;
  height: auto;
  mask-image: url(/img/union.svg);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url(/img/union.svg);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}
</style>