Refine news teaser layout

web/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_news.scss

@@ -1,7 +1,7 @@
 .news-entry {
   width: 100%;
   &:not(:last-child) {
-    margin-bottom: 20px;
+    margin-bottom: 40px;
   }
 }
 
@@ -13,7 +13,7 @@
   display: flex;
   flex-direction: column;
 
-  @include mq($from: tablet) {
+  @include mq($from: desktop) {
     flex-direction: row;
   }
 }
@@ -22,8 +22,8 @@
   width: 100%;
   margin-bottom: 8px;
 
-  @include mq($from: tablet) {
-    width: percentage(1/3);
+  @include mq($from: desktop) {
+    width: percentage(1/2);
   }
 }
 
@@ -33,15 +33,15 @@
 }
 
 .news-entry__headline {
-  margin-top: 0;
+  hyphens: auto;
 }
 
 .news-entry__teaser {
   width: 100%;
 
-  @include mq($from: tablet) {
-    padding-left: 16px;
-    width: percentage(2/3);
+  @include mq($from: desktop) {
+    padding-left: 24px;
+    width: percentage(1/2);
   }
 
   p {

web/typo3conf/ext/ep_events/Resources/Private/Partials/News/List/Item.html

@@ -6,7 +6,7 @@
         <n:excludeDisplayedNews newsItem="{newsItem}"/>
         <div class="news-entry__inner">
             <div class="news-entry__image">
-                <h2 class="headline headline--primary" itemprop="headline">
+                <h2 class="headline headline--primary news-entry__headline" itemprop="headline">
                     {newsItem.title}
                     <span class="subline">
                         <time itemprop="datePublished" datetime="{f:format.date(date:newsItem.datetime, format:'Y-m-d')}"><f:format.date format="{f:translate(key:'dateFormat')}">{newsItem.datetime}</f:format.date></time>
@@ -18,7 +18,7 @@
                             <f:alias map="{mediaElement: '{newsItem.mediaPreviews.0}'}">
                                 <f:image image="{mediaElement}" title="{mediaElement.originalResource.title}"
                                          crop="{mediaElement.crop}"
-                                         width="640" height="360c+50"
+                                         width="640"
                                          alt="{mediaElement.originalResource.alternative}" class="scale"/>
                             </f:alias>
                         </f:if>
@@ -28,7 +28,7 @@
                             <f:alias map="{mediaElement: '{newsItem.media.0}'}">
                                 <f:image image="{mediaElement}" title="{mediaElement.originalResource.title}"
                                          crop="{mediaElement.crop}"
-                                         width="640" height="360c+50"
+                                         width="640"
                                          alt="{mediaElement.originalResource.alternative}" class="scale"/>
                             </f:alias>
                         </f:if>