diff --git a/src/back/jdd-components/dynamic-grid-v2/dynamic-grid-v2.css b/src/back/jdd-components/dynamic-grid-v2/dynamic-grid-v2.css index bc2341f..af18ab4 100644 --- a/src/back/jdd-components/dynamic-grid-v2/dynamic-grid-v2.css +++ b/src/back/jdd-components/dynamic-grid-v2/dynamic-grid-v2.css @@ -1,4 +1,6 @@ .dynamic-grid { + container-type: inline-size; + &.dynamic-grid--bleed-bleed { grid-column: bleed !important; } @@ -47,12 +49,6 @@ box-sizing: border-box; .tile-content-wrapper { - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 4; - line-height: 20px; - overflow: hidden; - .tile-title { font-weight: bold; line-height: 20px; @@ -182,40 +178,66 @@ } } - @container (max-width: 950px) { - .tab-container { - .tiles-container { - grid-template-columns: repeat(2, 1fr); + @container (max-width: 900px) { + .tiles-container { + grid-template-columns: repeat(3, 1fr); - .tile.vertical { - grid-row: span 1; - grid-column: span 1; + .tile.vertical { + grid-row: span 1; + grid-column: span 1; - .tile-image--vertical { - display: none; - } - - .tile-image--horizontal { - display: none; - } - - .tile-image--square { - display: block; - - picture img { - display: block !important; - } - } + .tile-image--vertical { + display: none; } - .tile.horizontal { - grid-column: span 1; + .tile-image--horizontal { + display: none; + } + + .tile-image--square { + display: block; + + picture img { + display: block !important; + } } } } } @container (max-width: 700px) { + .tiles-container { + grid-template-columns: repeat(2, 1fr); + + .tile.vertical { + grid-row: span 1; + grid-column: span 1; + + .tile-image--vertical { + display: none; + } + + .tile-image--horizontal { + display: none; + } + + .tile-image--square { + display: block; + + picture img { + display: block !important; + } + } + } + + .tile.vertical { + grid-row: span 2; + grid-column: span 1; + } + } + } + + @container (max-width: 500px) { .tiles-container { grid-template-columns: 1fr; max-width: 700px;