section h-full

src/components/Footer.astro

@@ -14,7 +14,7 @@ const { lang, socialMediaLinks } = Astro.props
 const t = useTranslations(lang)
 ---
 
-<footer id="contacts" class="flex flex-col items-center gap-4 text-center md:gap-6">
+<footer id="contacts" class="flex w-full flex-col items-center gap-4 text-center md:gap-6">
   <iframe
     transition:persist
     src=`https://yandex.ru/map-widget/v1/?um=constructor%3A069b17526dc83cbf87c488f13ae089eb3af0f8f74af57e1be82e183434693562&source=constructor&scroll=false&lang=${lang}`

src/components/GymGallery.tsx

@@ -9,15 +9,18 @@ export const GymGallery: React.FC<GymGalleryProps> = ({ images }) => {
   return (
     <MediaSwiper
       breakpoints={{
-        [TW_SCREENS.MD]: {
+        [TW_SCREENS.SM]: {
           slidesPerView: 2,
         },
-        [TW_SCREENS.LG]: {
+        [TW_SCREENS.MD]: {
           slidesPerView: 3,
         },
+        [TW_SCREENS.LG]: {
+          slidesPerView: 4,
+        },
       }}
       images={images}
-      imageClassName="aspect-3/4 max-w-[50vh] md:max-w-none mx-auto lg:max-h-[calc(90vh-144px)]"
+      imageClassName="aspect-3/4 max-w-[50vh] sm:max-w-[33vh] lg:max-w-[45vh] mx-auto"
     />
   )
 }

src/components/Marquee.astro

@@ -11,7 +11,7 @@ const repeatedTexts =
   texts.length < 10 ? Array.from({ length: 10 / texts.length }, () => texts).flat() : texts
 ---
 
-<div class="flex h-full w-max animate-marquee items-center gap-10 text-5xl font-bold uppercase">
+<div class="flex h-full w-max animate-marquee items-center gap-10 text-5xl font-bold uppercase bg-brand">
   {
     repeatedTexts.map((text) => (
       <>

src/components/Section.astro

@@ -14,7 +14,7 @@ const { title, description, className, id } = Astro.props
 <section
   id={id}
   class={cn(
-    'overflow-hidden w-full flex flex-col gap-5 py-16 px-5 md:px-10 lg:p-24 md:gap-12',
+    'overflow-hidden w-full flex flex-col gap-5 py-16 px-5 md:px-10 lg:p-24 md:gap-12 h-full justify-center',
     className
   )}
 >

src/components/coaches/CoachCard.tsx

@@ -8,12 +8,12 @@ export const CoachCard: React.FC<CoachCardProps> = ({ data, slug }) => {
   const coachPageLink = `/coaches/${slug}`
 
   return (
-    <div className="relative aspect-3/4 h-full max-w-[262px] overflow-hidden rounded-3xl text-white md:max-w-[320px] lg:max-w-[400px]">
+    <div className="relative mx-auto aspect-3/4 max-w-[45vh] overflow-hidden rounded-3xl text-white">
       <img
         {...cover}
         loading="lazy"
         decoding="async"
-        className="h-full w-full object-cover object-top mix-blend-luminosity"
+        className="w-full object-cover object-top mix-blend-luminosity"
         alt={coverAlt}
       />
       <a

src/components/coaches/Coaches.tsx

@@ -2,17 +2,30 @@ import type { CollectionEntry } from 'astro:content'
 import { SimpleSwiper } from '../swiper/SimpleSwiper'
 import { SwiperSlide } from 'swiper/react'
 import { CoachCard } from './CoachCard'
+import { isAboveBreakpoint } from '@/libs/breakpoint'
+import { TW_SCREENS } from '@/constants/images'
 
 type CoachesProps = {
   coaches: CollectionEntry<'coaches'>[]
   lang?: string
 }
 
+const isXs = isAboveBreakpoint('XS')
+
 export const Coaches: React.FC<CoachesProps> = ({ coaches, lang }) => {
   return (
-    <SimpleSwiper>
+    <SimpleSwiper
+      slidesPerView={1}
+      freeMode={isXs}
+      pagination={{ type: 'fraction', enabled: !isXs }}
+      breakpoints={{
+        [TW_SCREENS.XS]: {
+          slidesPerView: 'auto',
+        },
+      }}
+    >
       {coaches.map((coach, index) => (
-        <SwiperSlide className="!h-auto" style={{ width: 'auto' }} key={index}>
+        <SwiperSlide key={index} className="w-full xs:!w-auto">
           <CoachCard {...coach} lang={lang} />
         </SwiperSlide>
       ))}

src/components/swiper/MediaSwiper.tsx

@@ -27,7 +27,7 @@ export const MediaSwiper = React.forwardRef<SwiperRef, MediaSwiperProps>(
         loop={true}
         watchSlidesProgress={true}
         style={{ overflow: 'hidden' }}
-        className={cn('h-full w-full', className)}
+        className={cn('w-full rounded-3xl', className)}
         {...otherProps}
       >
         {images.map((image, index) => (
@@ -38,7 +38,7 @@ export const MediaSwiper = React.forwardRef<SwiperRef, MediaSwiperProps>(
               decoding="async"
               fetchPriority={index === 0 ? 'high' : 'auto'}
               className={cn(
-                'aspect-video h-full w-full rounded-3xl object-cover object-center',
+                'aspect-video w-full rounded-3xl object-cover object-center',
                 imageClassName
               )}
             />

src/components/swiper/MediaSwiperWithThumbs.tsx

@@ -7,6 +7,7 @@ import 'swiper/css/pagination'
 import 'swiper/css/thumbs'
 import 'swiper/css/free-mode'
 import { MediaSwiper, type MediaSwiperProps } from './MediaSwiper'
+import { TW_SCREENS } from '@/constants/images'
 
 type MediaSwiperPropsWithThumbs = MediaSwiperProps & {
   thumbs: ImportAttributes[]
@@ -29,7 +30,12 @@ export const MediaSwiperWithThumbs: React.FC<MediaSwiperPropsWithThumbs> = ({
       />
       <Swiper
         onSwiper={setThumbsSwiper}
-        spaceBetween={12}
+        spaceBetween={8}
+        breakpoints={{
+          [TW_SCREENS.MD]: {
+            spaceBetween: 12,
+          },
+        }}
         slidesPerView={4}
         freeMode={true}
         watchSlidesProgress={true}

src/components/swiper/simple-swiper.css

@@ -1,6 +1,13 @@
 .simple-swiper {
   width: 100%;
+  /* height: 100%; */
   overflow: visible;
+  display: flex;
+  flex-direction: column;
+}
+
+.swiper-wrapper {
+  height: auto;
 }
 
 .swiper-pagination-fraction {

src/i18n/ui.ts

@@ -31,7 +31,7 @@ export const ui = {
     'coaches.subtitle': 'Вашему вниманию! Представляем наш тренерский состав',
     'coaches.link': 'Подробнее',
     // Slider Section
-    'slider.title': 'НАШ <span class="text-brand">ТРЕНАЖЕРНЫЙ ЗАЛ</span>',
+    'slider.title': 'НАШ <span class="text-brand">ЗАЛ</span>',
     'slider.subtitle': 'Современное оборудование в просторном зале',
     // Services Section
     'services.title': 'НАШИ <span class="text-brand">УСЛУГИ</span>',

src/pages/coaches/[...slug].astro

@@ -36,13 +36,13 @@ const [thumbs, optimizedGallery] = galleryWithCover
   <Header />
   {
     optimizedGallery && (
-      <Section className="mt-[var(--header-height)] md:mt-0">
+      <Section className="mt-[var(--header-height)] md:mt-0 overflow-auto h-auto">
         <div class="grid w-full grid-cols-1 place-items-start gap-8 lg:grid-cols-2">
           <MediaSwiperWithThumbs
             client:only="react"
             images={optimizedGallery}
             thumbs={thumbs}
-            imageClassName="aspect-3/4 max-w-[50vh] lg:w-auto object-top mx-auto lg:max-h-[70vh]"
+            imageClassName="aspect-3/4 max-w-[35vh] lg:w-auto object-top mx-auto lg:max-h-[70vh]"
           />
           <div class="flex flex-1 flex-col gap-8">
             <h1 class="font-bold lg:text-nowrap">{data.name}</h1>

src/pages/index.astro

@@ -89,7 +89,7 @@ const t = useTranslations(lang)
 
   {
     services && (
-      <Section id="services" title={t('services.title')}>
+      <Section id="services" title={t('services.title')} className="h-auto">
         <Services client:visible services={services} />
       </Section>
     )
@@ -97,7 +97,7 @@ const t = useTranslations(lang)
 
   {
     optimizedReviews && (
-      <Section id="reviews" title={t('reviews.title')}>
+      <Section id="reviews" title={t('reviews.title')} className="h-auto">
         <Reviews client:only="react" reviews={optimizedReviews} lang={lang} />
       </Section>
     )

src/styles/global.css

@@ -20,7 +20,7 @@
 
 @layer base {
   :root {
-    --header-height: 6rem;
+    --header-height: 4rem;
     --marquee-height: 105px;
     --swiper-theme-color: rgba(198, 15, 211, 1) !important;
   }

tailwind.config.js

@@ -1,8 +1,13 @@
+import { TW_WIDTHS } from './src/constants/images';
+
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
   theme: { 
     extend: {
+      screens: {
+        xs: `${TW_WIDTHS.XS}px`, 
+      },
       colors: {
         bg: {
           main: 'rgba(19, 21, 20, 1)',