added desktop availables update

src/components/Main/Availables.tsx

@@ -7,12 +7,13 @@ import { getIcon } from '../../utils/getIcon';
 
 export function Availables() {
   return (
-    <div className="lg:py-[100px] py-14 sm:grid lg:grid-cols-12 max-lg:grid-cols-8 gap-x-4 gap-y-8">
+    <div className="lg:py-[100px] py-14 sm:grid lg:grid-cols-12 lg:grid-rows-[repeat(4,fit)] max-lg:grid-cols-8">
       <Title className="lg:mb-14 mb-6 col-span-full">
         <span className="text-gradient text-wrap">Многопользовательский </span>
         режим обучения
       </Title>
-      <div className="grid sm:grid-cols-3 lg:-mx-10 sm:-mx-6 -mx-4 sm:pb-5 pb-2 max-sm:pt-2 lg:col-start-1 col-span-full">
+      <div className="col-span-6 col-start-1 row-span-2 row-start-2 bg-[url(src/assets/availables/image.png)] bg-cover bg-no-repeat bg-center" />
+      <div className="lg:col-span-6 row-span-2 grid grid-cols-2 grid-rows-2 lg:-mr-10 sm:-mr-6 slg:aspect-[808/560]">
         <MultiUserFeature
           type="processes"
           text="отработка производственных процессов, в которых участвует группа людей"
@@ -27,7 +28,7 @@ export function Availables() {
         />
       </div>
       <AppearanceText
-        className="col-start-1 lg:col-span-6 col-span-7 max-lg:mt-6"
+        className="col-start-1 lg:col-span-6 col-span-7 mt-8 max-lg:mt-6"
         splits={[
           'В одном ',
           'цифровом ',
@@ -61,7 +62,9 @@ function MultiUserFeature({
   return (
     <div
       ref={ref}
-      className="bg-right-bottom bg-no-repeat flex flex-col bg-[url(src/assets/availables/highlight.png)] bg-[length:0%_0%] hover:bg-[length:100%_100%] transition-all duration-300 lg:aspect-[532.67/280] sm:aspect-[255.33/280] aspect-[3/2'] w-full justify-between items-start px-10 py-6 sm:border-y border-t max-sm:last:border-b sm:border-r last:border-r-0 border-[#3D425C] lg:min-h-[214px] sm:min-h-[240px] min-h-[220px]"
+      className={
+        'bg-right-bottom bg-no-repeat flex flex-col bg-[url(src/assets/availables/highlight.png)] bg-[length:0%_0%] hover:bg-[length:100%_100%] transition-all min-h-[280px] duration-300 w-full justify-between items-start px-10 py-6 lg:border-t lg:first:border-r lg:last:border-b border-[#3D425C] lg:col-span-1 lg:last:col-span-2 lg:aspect-[403/280]lg:last:aspect-[808/280]'
+      }
     >
       {getIcon(type, hovered, 'mb-4 max-sm:hidden w-14 h-14')}
       {getIcon(type, isInView, 'mb-4 sm:hidden w-14 h-14')}