diff --git a/src/components/hy-hero/hy-hero.scss b/src/components/hy-hero/hy-hero.scss index 133841a5143fa3de759347bfed68ee5999ef2474..1841ea59a475f6aa3a9dbe45e27644a7355e3b78 100644 --- a/src/components/hy-hero/hy-hero.scss +++ b/src/components/hy-hero/hy-hero.scss @@ -270,16 +270,25 @@ } @include breakpoint($wide) { + min-height: 338px; padding: 52px 2rem; } + @include breakpoint(1060px) { + min-height: 373px; + } + + @include breakpoint(1160px) { + min-height: 480px; + } + @include breakpoint($extrawide) { padding-left: 32px; // Original 24px + 8px padding-right: 8px; } - @include breakpoint($xlarge) { - padding-left: 0; + @include breakpoint(1260px) { + min-height: 443px; } @include breakpoint(1280px) { @@ -287,12 +296,36 @@ padding-left: 0; } - @include breakpoint(1440px) { - min-height: 540px; + @include breakpoint(1360px) { + min-height: 478px; + } + + @include breakpoint(1460px) { + min-height: 513px; + } + + @include breakpoint(1560px) { + min-height: 548px; + } + + @include breakpoint($xlarge) { + padding-left: 0; + } + + @include breakpoint(1660px) { + min-height: 583px; + } + + @include breakpoint(1760px) { + min-height: 619px; + } + + @include breakpoint(1860px) { + min-height: 654px; } @include breakpoint(1920px) { - min-height: 720px; + min-height: 675px; } } @@ -386,7 +419,7 @@ position: absolute; right: 0; top: 0; - width: 60%; + width: 56.25%; } } @@ -411,29 +444,59 @@ flex-direction: column; justify-content: center; margin: 0 auto; - min-height: 360px; + min-height: 329px; padding: 52px 2rem 52px calc(2rem - 8px); position: relative; width: 100%; } + @include breakpoint(1060px) { + min-height: 364px; + } + + @include breakpoint(1160px) { + min-height: 399px; + } + @include breakpoint($extrawide) { - min-height: 400px; padding: 80px 24px; } - @include breakpoint($overwide) { - min-height: 450px; + @include breakpoint(1260px) { + min-height: 346px; + } + + @include breakpoint(1360px) { + min-height: 374px; + } + + @include breakpoint(1460px) { + min-height: 402px; + } + + @include breakpoint(1560px) { + min-height: 430px; } @include breakpoint($xlarge) { max-width: 1216px; - min-height: 500px; padding: 80px 0; } + @include breakpoint(1660px) { + min-height: 448px; + } + + @include breakpoint(1760px) { + min-height: 484px; + } + + @include breakpoint(1860px) { + min-height: 519px; + } + @include breakpoint(1920px) { - min-height: 600px; + min-height: 540px; } } @@ -457,7 +520,7 @@ order: 1; position: absolute; top: 0; - width: 40%; + width: 43.75%; } }