.title_count{font-family:var(--font-main);font-weight:400;line-height:140%;color:var(--Background-surface_1)}.awards_title_text{font-family:var(--font-main-medium);font-weight:525;line-height:100%;color:var(--Foreground-default)}.awards_title{display:flex;justify-content:flex-start;align-items:flex-start;width:100%!important}.awards_body{display:flex;flex-direction:column}.awards_list{transition:all .3s linear;position:relative;gap:var(--gap12)}.awards_line{width:100%;height:1px;background:var(--Stroke-default)}.award_text{font-family:var(--font-main);line-height:140%;letter-spacing:-.2px;text-align:left}.award_video{object-fit:cover;border-radius:1rem;pointer-events:none;z-index:var(--z-header);transition:opacity 0s linear}.award_video.visible{opacity:1}


/* 
! awards_list_main
xl gap-48px
lg 40px
md 40px
sm 36px
xs 36px

!awards_list
xl  padding 24 , 60px ,  display: grid; grid-template-columns: 3fr 2fr 1fr;
lg  20px 42px display: grid; grid-template-columns: 3fr 2fr 1fr;
md  20px 38px display: flex , flex-direction: column
sm  16px 24px display: grid; grid-template-columns:  1fr 2fr;
xs  20px 16px display: flex , flex-direction: column
!award_video
xl   width: '300px',     height: '300px',         
lg  220 220
md  228 228
sm hidden
xs hidden

!award_rating
xl justify-end
lg  justify-end
md justify-start
sm justify-start
xs justify-start
!award_place
xl font-size 20px
lg 16px
md 24px
sm 20px
xs 20px

!award_title
xl font-size 20px
lg 16px
md 24px
sm 20px
xs 20px
!desktop_rating
xl font-size 20px
lg 16px
md 16px
sm hidden
xs hidden
!mobile_rating
xl hidden
lg hidden
md hidden
sm 16px
xs 15px

 <div className="awards_list_main relative flex flex-col gap-9 xl:gap-12 lg:gap-10 md:gap-10 sm:gap-9 xs:gap-9 p-0">
      <div className="awards_header">
        <div className="awards_title gap-2 pl-4 xs:pl-4 sm:pl-6 md:pl-[38px] lg:pl-[42px] xl:pl-14">
          <span className="awards_title_text tracking-[-1.2px] text-[28px] xs:text-[28px] sm:text-[36px] md:text-[42px] lg:text-[52px] xl:text-[70px] xs:tracking-[-1.2px] sm:tracking-[-1px] md:tracking-[-1.81px] lg:tracking-[-2.1px] xl:tracking-[-2.8px]">
            Награды
          </span>
          <span className="title_count text-[15px] xs:text-[15px] sm:text-[16px] md:text-[16px] lg:text-[16px] xl:text-[20px] tracking-[0px] xs:tracking-[0px] sm:tracking-[0px] md:tracking-[0px] lg:tracking-[0px] xl:tracking-[-0.2px]">
            {awards.length}
          </span>
        </div>
      </div>

      <div className="awards_body overflow-hidden" ref={containerRef}>
            <VideoAnimation
            rowsRef={rowsRef}
            containerRef={containerRef}
            activeRowIndex={activeRowIndex}
            setActiveRowIndex={setActiveRowIndex}
            />
        
        {awards.map((award, index) => (
          <React.Fragment key={index}>
            <div className="awards_line"></div>
            <div
              className={`awards_list grid xl:grid-cols-[3fr_2fr_1fr] lg:grid-cols-[3fr_2fr_1fr] md:flex md:flex-col sm:grid sm:grid-cols-[1fr_2fr] xs:flex xs:flex-col xl:p-6 xl:pl-14 lg:p-5 lg:pl-10 md:p-5 md:pl-[38px] sm:p-4 sm:pl-6 xs:p-5 xs:pl-4 ${activeRowIndex === index ? 'active' : ''}`}
              ref={(el) => setRowRef(el, index)}
            >
              <div className="award_text award_place text-xl lg:text-base md:text-2xl sm:text-xl xs:text-xl">{award.place}</div>
              <div className="flex flex-col">
                <div className="award_text award_title text-xl lg:text-base md:text-2xl sm:text-xl xs:text-xl">{award.title}</div>
                <div className="award_text mobile_rating hidden sm:block sm:text-base xs:text-[15px]">{award.rating}</div>
              </div>
              <div className="award_rating desktop_rating flex items-center xl:justify-end lg:justify-end md:justify-start sm:justify-start xs:justify-start text-xl lg:text-base md:text-base sm:hidden xs:hidden">
                <div className="award_text">{award.rating}</div>
              </div>
            </div>
          </React.Fragment>
        ))}
        <div className="awards_line"></div>
      </div>
    </div>
*/