diff --git a/src/sass/_film-info.scss b/src/sass/_film-info.scss index 297bf539aa647daa56e0a0de08daf6f2e2b301fb..f59748e4634b327e4c69035335b1a447a9f14bcd 100644 --- a/src/sass/_film-info.scss +++ b/src/sass/_film-info.scss @@ -50,9 +50,7 @@ $transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); pointer-events: initial; } - @media screen and (max-width: 767px) { - padding: 20px; - } + } .film-info__container { @@ -75,14 +73,15 @@ $transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } @media screen and (min-width: 768px) { - height: 562px; + max-height: 100vh; + overflow-y: scroll; width: 618px; display: flex; padding: 42px 28px 40px 28px; + } @media screen and (min-width: 1024px) { - height: 568px; width: 882px; padding: 50px 30px 40px 30px; } @@ -104,12 +103,13 @@ $transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } @media screen and (min-width: 768px) and (max-width: 1023px){ - height: fit-content; + height: 374px; } @media screen and (min-width: 1024px) { margin-right: 30px; min-width: 396px; + height: 478px; } } @@ -206,13 +206,27 @@ $transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); .film-info__description { line-height: 1.67; margin-bottom: 20px; - max-height: 256px; max-width: 100%; - overflow-y: scroll; + + @media screen and (min-width: 768px) { + max-height: 236px; + overflow-y: scroll; + } + + @media screen and (min-width: 1024px) { + max-height: 160px; + } +} + +.film-info__buttons { + display: flex; + + @media screen and (max-width: 767px) { + justify-content: center; + } } .film-info__button { - padding: 14px 8px 12px 8px; font-size: 12px; line-height: 1.33; font-weight: inherit; @@ -220,10 +234,27 @@ $transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); border-radius: 5px; border: 1px solid $primary-text-color; background-color: $primary-white-color; + + @media screen and (max-width: 767px) { + width: 112px; + height: 44px; + padding-left: 8px; + padding-right: 8px; + } + + @media screen and (min-width: 768px) { + min-width: 125px; + padding: 14px 8px 12px 8px; + } + + @media screen and (min-width: 1024px) { + min-width: 136px; + } } .film-info__button--accent { - border: 1px solid transparent; + border: 1px solid $accent-color; background-color: $accent-color; color: $primary-white-color; + margin-right: 15px; } \ No newline at end of file