.LP-PlaceTeaser { width: 100%; .LP-PlaceTeaser__Image { width: 100%; overflow: hidden; .LP-Image { max-width: unset; max-height: unset; object-fit: cover; } } .LP-PlaceTeaser__Meta { display: flex; flex-wrap: wrap; gap: $-spacing-small; align-items: center; justify-content: space-between; padding: 5px; padding-bottom: 10px; padding-top: 10px; .LP-Paragraph { font-family: $-primary-sans-serif-font; padding: 0; margin: 0; margin-top: 5px; font-size: 1.3rem; } .LP-Headline { font-family: $-primary-sans-serif-font; color: $-grey; font-size: 2rem; padding: 0px; margin: 0px; } .LP-Icon { height: 2em; width: 2em; } } .LP-PlaceTeaser__Description { font-family: $-primary-sans-serif-font; color: $-grey; order: 3; flex-basis: 100%; .LP-Paragraph { font-size: 22px; } } } @media(min-width: $-viewport-small) { .LP-PlaceTeaser { width: 280px; &__Image { width: 280px; height: 165px; } } .LP-PlaceTeaser--extended { display: flex; flex-direction: row; width: auto; padding-right: 25px; height: 165px; .LP-PlaceTeaser__Meta { margin: 0; padding-left: 25px; display: flex; flex-wrap: nowrap; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: unset; .LP-Headline, .LP-Paragraph { font-size: unset; } .LP-PlaceTeaser__Info { .LP-Headline { font-size: 28px; } } .LP-PlaceTeaser__Icons { margin-top: auto; ul { padding: 0; margin: 0; } } .LP-Icon { height: 20px; width: 20px; } } .LP-PlaceTeaser__Description { display: block; max-height: 55px; overflow: hidden; order: unset; .LP-Paragraph { font-size: unset; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; } } .LP-PlaceTeaser__Image { height: 165px; width: 280px; flex-shrink: 0; flex-grow: 0; } } }