diff --git a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss index c607394..71bf895 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss +++ b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss @@ -438,6 +438,10 @@ section.marketingheader{ } } &.infoteaser{ + border-radius: 4px; + .slide-overflow{ + border-radius: 4px; + } outer{ max-height:427px; height:427px; @@ -447,16 +451,41 @@ section.marketingheader{ } } .rotation { - @media screen and (max-width:900px){ - .slider .text-box:first-child::after { - display: none; + padding:0; + @media screen and (max-width: 1000px) { + .slide:not(.text-only) .text-box{ + padding: 16px 0; + } + .slide .image-box img{ + position: static; + height:300px; + } + .slider-tabs{ + top:0; + height: auto; + bottom: auto; + margin-top:15px; } - padding:0; } + @media screen and (max-width: 900px) { + .slider .image-box { + padding-left: var(--container-padding); + padding-right: var(--container-padding); + } + .slider .text-box:first-child::after { + display: none; + } + } .text-box{ min-height: 0; } } + outer{ + border-radius: 4px; + .image-box img{ + border-radius: 4px; + } + } .image-box{ max-height:427px; min-height: 0; @@ -503,6 +532,14 @@ section.marketingheader{ padding: 8px 0; .mini-teaser{ height: 100%; + .text-box{ + height: 100%; + flex-flow: column; + justify-content: space-between; + .btn{ + height: fit-content; + } + } } } } @@ -535,10 +572,10 @@ section.marketingheader{ } .slider{ background-color: transparent; - .image-box img { @media screen and (max-width:900px) { height: 300px; + } @media screen and (max-width:767px) { height: 300px; @@ -630,7 +667,7 @@ section.marketingheader{ } .rotation .slider{ border-bottom:0; - border-radius: 4px; + background-color: white; h3{ margin-top: 4px; @@ -645,9 +682,7 @@ section.marketingheader{ .btn{ margin-top:0.4em; } - .slide-overflow{ - border-radius: 4px; - } + .slider-tabs{ li:first-child:last-child{ display:none; @@ -703,27 +738,25 @@ section.marketingheader{ @media (max-width:1000px){ .slider{ background-color: white; - .slider-tabs{ - top:0; - height: auto; - bottom: auto; - margin-top:15px; - } - .slide:not(.text-only) .text-box{ - padding: 16px 0; - } + + .text-box:not(:first-child)::before{ display: none; } .image-box{ order: 0; - + img{ + aspect-ratio: 16 / 9; + height: auto !important; + max-height:none !important; + min-height: 177px !important; + } &:before{ display: none; } img{ position: static; - height:300px; + //height:300px; } } } @@ -740,10 +773,6 @@ section.marketingheader{ padding-left: var(--container-padding); padding-right: var(--container-padding); } - .image-box{ - padding-left: var(--container-padding); - padding-right: var(--container-padding); - } .slider-tabs{ right: calc(var(--container-padding) + 10px); top: 15px; @@ -757,11 +786,6 @@ section.marketingheader{ } @media screen and (max-width:767px){ .slider{ - .image-box{ - img{ - height:250px; - } - } .slide:not(.text-only) .text-box{ padding: 16px var(--container-padding); } @@ -779,11 +803,6 @@ section.marketingheader{ @media screen and (max-width:567px) { .slider { margin: 0; - .image-box{ - img{ - height:177px; - } - } } } .context-box{