|
|
|
@@ -1,7 +1,7 @@ |
|
|
|
@import '../../_global/styles/mixins'; |
|
|
|
@import '../../_global/styles/vars'; |
|
|
|
|
|
|
|
.teasers { |
|
|
|
.teasers:not([data-items="1"]) { |
|
|
|
position: relative; |
|
|
|
display: block; |
|
|
|
|
|
|
|
@@ -240,103 +240,6 @@ |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@media(min-width: 568px) { |
|
|
|
&[data-items="1"] { |
|
|
|
.kicker:first-child { |
|
|
|
min-width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.teaser { |
|
|
|
&:not(.fullwidth) { |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
align-items: flex-start; |
|
|
|
flex-wrap: wrap; |
|
|
|
} |
|
|
|
&.fullwidth { |
|
|
|
.kicker:first-child { |
|
|
|
max-width: calc(50% - var(--col-padding)); |
|
|
|
min-width: calc(50% - var(--col-padding)); |
|
|
|
} |
|
|
|
|
|
|
|
//.image-box { |
|
|
|
// margin-top: -29px; |
|
|
|
//} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.text-box { |
|
|
|
min-width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.image-box { |
|
|
|
max-width: calc(50% - 20px); |
|
|
|
min-width: calc(50% - 20px); |
|
|
|
flex: 1 1 100%; |
|
|
|
margin-right: 40px; |
|
|
|
|
|
|
|
~ .kicker { |
|
|
|
position: absolute; |
|
|
|
left: 50%; |
|
|
|
margin-left: 20px; |
|
|
|
white-space: nowrap; |
|
|
|
overflow: hidden; |
|
|
|
text-overflow: ellipsis; |
|
|
|
max-width: calc(50% - 20px); |
|
|
|
|
|
|
|
~ .text-box { |
|
|
|
padding-top: 10px; |
|
|
|
min-width: calc(50% - 20px); |
|
|
|
max-width: calc(50% - 20px); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@media(min-width: 1000px) { |
|
|
|
&[data-items="1"] { |
|
|
|
.teaser:has(.image-box) { |
|
|
|
display: grid !important; |
|
|
|
grid-template-columns: 1fr 1fr !important; |
|
|
|
align-items: start; |
|
|
|
gap: 0 40px; |
|
|
|
.kicker { |
|
|
|
grid-column: 2; |
|
|
|
grid-row: 1; |
|
|
|
} |
|
|
|
.title { |
|
|
|
margin-top: 0 !important; |
|
|
|
} |
|
|
|
.image-box { |
|
|
|
grid-column: 1; |
|
|
|
grid-row: 1 / span 999; |
|
|
|
width: 100% !important; |
|
|
|
max-width: none; |
|
|
|
margin-top: 0 !important; |
|
|
|
//max-width: calc(50% - 20px); |
|
|
|
//min-width: calc(50% - 20px); |
|
|
|
|
|
|
|
~ .kicker { |
|
|
|
//max-width: calc(50% - 20px); |
|
|
|
//margin-left: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
~ .text-box { |
|
|
|
grid-column: 2; |
|
|
|
grid-row: 2; |
|
|
|
//max-width: calc(50% - 20px); |
|
|
|
//min-width: calc(50% - 20px); |
|
|
|
} |
|
|
|
~ .reading-time { |
|
|
|
grid-column: 2; |
|
|
|
grid-row: 3; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
div.teaser { |
|
|
|
height: 100%; |
|
|
|
display: flex; |
|
|
|
|