<script setup lang="ts">
/* код */
</script>

<template>
  <div class="main">
    <div class="message-cloud-3"></div>
    <div class="message-cloud-2"></div>
    <div class="message-cloud">
      <slot></slot>
    </div>
  </div>
</template>

<style scoped>
.main {
  position: relative;
}

.message-cloud, .message-cloud-2, .message-cloud-3 {
  background-color: bisque;
}

.message-cloud {
  margin: 15px 0;
  padding: 16px;
  font-family: main;
  color: black;
  line-height: 20px;
  font-size: 18px;
  font-weight: 900;
  position: relative;
}

.message-cloud,
.message-cloud-2,
.message-cloud-3 {
  border-radius: 5px;
  background-image: url("@/assets/images/paper.jpg");
  background-size: cover;
  display: flow-root;
  box-shadow: 0 0 5px black;
}

.message-cloud-2,
.message-cloud-3 {
  position: absolute;
  top: 0;
  left: 0;
}

.message-cloud-2 {
  transform: rotate(-3deg);
  filter: brightness(50%);
  height: 100%;
  width: 100%;
}

.message-cloud-3 {
  transform: rotate(2deg);
  filter: brightness(80%);
  height: 100%;
  width: 100%;
}
</style>
