diff --git a/src/widgets/TimeFrameSlider/ui/TimeFrameSlider/TimeFrameSlider.module.scss b/src/widgets/TimeFrameSlider/ui/TimeFrameSlider/TimeFrameSlider.module.scss index b8c5bdb..aa8e25c 100644 --- a/src/widgets/TimeFrameSlider/ui/TimeFrameSlider/TimeFrameSlider.module.scss +++ b/src/widgets/TimeFrameSlider/ui/TimeFrameSlider/TimeFrameSlider.module.scss @@ -3,13 +3,12 @@ display: flex; flex-direction: column; - justify-content: center; width: 100%; max-width: 1440px; min-height: 100vh; margin: 0 auto; - padding: 0 20px; + padding-top: 180px; color: var(--color-text); font-family: var(--font-family-main); @@ -17,6 +16,11 @@ border-right: 1px solid var(--color-border); border-left: 1px solid var(--color-border); + background-image: linear-gradient(to right, rgba(#42567A, 0.1) 1px, transparent 1px); + background-repeat: no-repeat; + background-position: center top; + background-size: 1px 100%; + overflow: hidden; @media (width <=768px) { @@ -26,15 +30,22 @@ } .title { - position: relative; + position: absolute; z-index: 2; - margin-bottom: 40px; - padding-left: 60px; + left: 0; + top: 170px; + + padding-left: 75px; font-weight: 700; font-size: 56px; line-height: 120%; + max-width: 15ch; + + border-left: 5px solid transparent; + border-image: var(--gradient-primary) 1; + @media (width <=768px) { margin-bottom: 20px; @@ -50,7 +61,14 @@ display: grid; grid-template-columns: 1fr; + width: calc(100% + 40px); height: 600px; + margin: 0 -20px; + + background-image: linear-gradient(to bottom, rgba(#42567A, 0.1) 1px, transparent 1px); + background-repeat: no-repeat; + background-position: center; + background-size: 100% 1px; @media (width <=768px) { display: flex; @@ -62,8 +80,9 @@ .controls { position: absolute; - left: 60px; - bottom: 50px; + transform-origin: left; + left: 100px; + bottom: 0; z-index: 10; display: flex; @@ -81,8 +100,7 @@ } .pagination { - margin-bottom: 10px; - + font-weight: 400; font-size: 14px; } @@ -159,4 +177,8 @@ @media (width <=768px) { display: none; } +} + +.eventCarousel { + padding: 55px 80px 105px; } \ No newline at end of file