<script setup lang="ts">

</script>

<template>
<section>
  <div class="about__grid py-16">
    <NuxtPicture
      class="overflow-hidden rounded-r-xl"
      style="grid-area: img-a;"
      src="/images/sweep.jpg"
    ></NuxtPicture>
    <div class="rounded-xl p-8 bg-slate-100 md:mr-16" style="grid-area: card-a;">
      Компания Чистый город осуществляет профессиональные комплексные услуги по уборке помещений для частных и корпоративных клиентов. Высокое качество выполняемых услуг обеспечивается за счет использования современной профессиональной техники с использованием качественных моющих средств нашими опытными специалистами.
    </div>
    <div class="rounded-xl p-8 bg-slate-100 md:ml-16" style="grid-area: card-b;">
      Нам дорог каждый клиент и важно каждое мнение о нас, поэтому мы с максимальной ответственностью подходим к своей работе! Наша работа делает мир чище! Благодаря нашему труду пространство становиться чистым, а чистота залог здоровья и приятно находиться в убранном чистом месте, пусть это будет ваша квартира, дом или рабочее место! Нам важно, чтобы наши клиенты оставались с нами и рекомендовали нас как ответственных профессионалов своего дела!
    </div>
    <NuxtPicture
      class="overflow-hidden rounded-l-xl"
      src="/images/building-window.jpg"
      style="grid-area: img-b;"
    ></NuxtPicture>
  </div>
</section>
</template>

<style scoped lang="postcss">
.about__grid {
  display: grid;
  gap: 16px;
  grid-template-columns:
    calc(calc(100% - var(--col-width)) / 2)
    repeat(3,
      calc(calc(var(--col-width) / 3) - 21.33px)
    )
    calc(calc(100% - var(--col-width)) / 2);
  grid-template-rows: 300px 300px;
  grid-template-areas:
    'img-a img-a card-a card-a .'
    '. card-b card-b img-b img-b';

  @media screen and (max-width: 1280px) {
    grid-template-columns: auto repeat(3, 1fr) auto;
  }
}

:deep(img) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>
