<template>
  <div class="pattern-section">
    <div class="pattern-section__bg" :style="{ backgroundImage: `url(${bgImage})` }" />
    <div class="pattern-section__front">
      <img :src="frontImage" alt="مدرسه بانو" />
    </div>
  </div>
</template>

<script setup>
defineProps({
  bgImage: { type: String, default: '' },
  frontImage: { type: String, default: '' },
})
</script>

<style lang="scss" scoped>
.pattern-section {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  width: 100%;

  &__bg {
    flex-basis: 75%;
    height: 100dvh;
    background-size: contain;
    background-position-x: right;
    background-repeat: repeat;

    @media (min-width: 768px) {
      flex-basis: 66.6667%;
    }
  }

  &__front {
    flex-basis: 25%;
    text-align: right;
    display: flex;
    align-items: center;
    max-height: fit-content;

    @media (min-width: 768px) {
      flex-basis: 33.3333%;
    }

    img {
      max-height: 658px;
      min-height: 300px;
      min-width: 150px;
      aspect-ratio: 1 / 2;
      object-fit: cover;
      border-radius: 1rem;
      z-index: 10;
      transform: translateX(-50%);
    }
  }
}
</style>
