fixed

src/components/Main/Contacts.tsx

@@ -42,7 +42,7 @@ export function Contacts() {
           color="secondary"
           className="py-4"
           width="full"
-          icon={<MailIcon />}
+          icon={<ClassNameWrapper element={<MailIcon />} className="w-8 h-8" />}
           onClick={() => {
             window.location.href = 'mailto:info@graff.tech';
           }}

src/components/Main/Project.tsx

@@ -12,7 +12,7 @@ export function Project({ src, title, tags, media, year }: IProject<Media>) {
       className="relative flex flex-col aspect-square"
     >
       {media === Media.img ? (
-        <div className="flex flex-1">
+        <div className="flex aspect-[4/3]">
           <img
             className="object-cover object-center w-full pointer-events-none"
             src={src}
@@ -20,7 +20,7 @@ export function Project({ src, title, tags, media, year }: IProject<Media>) {
           />
         </div>
       ) : (
-        <div className="flex flex-1">
+        <div className="flex aspect-[4/3]">
           <video
             ref={videoRef}
             src={src}
@@ -28,7 +28,7 @@ export function Project({ src, title, tags, media, year }: IProject<Media>) {
             loop
             playsInline
             autoPlay
-            className="flex-1 object-cover object-center w-full h-full -mb-px"
+            className="flex-1 object-cover object-center aspect-[4/3] -mb-px w-fullh-full"
           />
         </div>
       )}

src/components/Main/SliderControls.tsx

@@ -40,7 +40,7 @@ export const SliderControls = forwardRef<
 
     return (
       <div className={'flex items-center gap-2 ' + className}>
-        <div className="relative flex justify-center max-sm:order-2">
+        <div className="relative flex justify-center flex-1 max-sm:w-full max-sm:order-2">
           <svg
             width={width}
             height={height}

src/components/Main/Teaching.tsx

@@ -142,7 +142,7 @@ function TeachingFeaturesForOtherScreens() {
         </div>
         <img
           src="/images/teaching/modal.png"
-          className="rounded-md max-sm:absolute sm:-bottom-1 max-sm:left-[calc(101/360*100vw)] top-[calc(97/300*100%)]"
+          className="rounded-md max-sm:absolute sm:-bottom-1 max-sm:left-[calc(101/360*100vw)] top-[calc(97/300*100%)] object-cover"
           alt="Управление пользователями"
         />
       </div>

src/ui/SliderWithScaling.tsx

@@ -140,13 +140,13 @@ export function SliderWithScaling<T extends { title: string; id: number }>({
         onLeftClick={prevSlide}
         onRightClick={nextSlide}
         slidesCount={slides.length}
-        width={width >= 640 ? 132 : ((width - 32) / 328) * 196}
+        width={width >= 640 ? 132 : (width / 360) * 196}
         height={width >= 640 ? 66 : 58}
         className={
-          'absolute ' +
+          'max-lg:absolute ' +
           (controlsPosition === 'top'
-            ? 'top-[75px]'
-            : 'lg:bottom-16 -bottom-10 sm:self-end self-center')
+            ? 'top-[70px]'
+            : 'lg:bottom-16 -bottom-4 sm:bottom-10 max-sm:self-center self-end max-sm:w-full')
         }
       />
     </div>