@media (min-width: 576px) {
.grid .elementlist {
display: flex;
margin-left: 0;
margin-right: 0;
}
}
@media (min-width: 576px) {
.grid .elementlist>div {
flex: 1 1 50%;
padding: 0;
}
}
@media (min-width: 768px) {
.grid .elementlist>div {
flex: 1 1 33%;
}
}
.grid .elementlist>div .image-wrapper {
max-height: 300px;
}
.grid .elementlist>div .image-wrapper:before {
content: '';
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.15);
}
.grid .elementlist>div .image-wrapper+h3 {
inset: auto 15px 0;
font-size: 2.5rem;
background: rgba(0, 0, 0, 0.3);
}
@media (min-width: 576px) {
.grid .elementlist>div .image-wrapper+h3 {
inset: auto 0 0;
}
}
@media (min-width: 768px) {
.grid.col4 .elementlist>div {
flex: 1 1 25%;
}
}
.grid.col4 .elementlist>div .image-wrapper {
max-height: 230px;
}
@media (min-width: 768px) {
.grid.col2 .elementlist>div {
flex: 1 1 50%;
}
}
.grid.col2 .elementlist>div .image-wrapper {
max-height: 330px;
}