Cool grid

components/about-company.vue

@@ -4,25 +4,50 @@
 
 <template>
 <section>
-  <div class="grid grid-cols-2 col-w mx-auto px-4 md:px-16 py-16 gap-4">
+  <div class="about__grid py-16">
     <NuxtPicture
-      class="rounded-lg overflow-hidden"
-      src="/images/gloves.jpg"
+      class="overflow-hidden rounded-r-xl"
+      style="grid-area: img-a;"
+      src="/images/sweep.jpg"
     ></NuxtPicture>
-    <div class="border-2 border-lime-500 rounded-lg p-8">
+    <div class="rounded-xl p-8 bg-slate-100 md:mr-16" style="grid-area: card-a;">
       Компания Чистый город осуществляет профессиональные комплексные услуги по уборке помещений для частных и корпоративных клиентов. Высокое качество выполняемых услуг обеспечивается за счет использования современной профессиональной техники с использованием качественных моющих средств нашими опытными специалистами.
     </div>
-    <div class="border-2 border-lime-500 rounded-lg p-8">
+    <div class="rounded-xl p-8 bg-slate-100 md:ml-16" style="grid-area: card-b;">
       Нам дорог каждый клиент и важно каждое мнение о нас, поэтому мы с максимальной ответственностью подходим к своей работе! Наша работа делает мир чище! Благодаря нашему труду пространство становиться чистым, а чистота залог здоровья и приятно находиться в убранном чистом месте, пусть это будет ваша квартира, дом или рабочее место! Нам важно, чтобы наши клиенты оставались с нами и рекомендовали нас как ответственных профессионалов своего дела!
     </div>
     <NuxtPicture
-      class="rounded-lg overflow-hidden"
+      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>