| @@ -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; | |||