.helen-exhibitions {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-m);
max-width: var(--helen-content-width);
margin: 0 auto;
padding: 0;
list-style: none;
} .helen-exhibitions__card {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-xs);
margin: 0;
color: var(--color-text-on-light, #4c4c4c);
font-family: var(--font-sans, Noto Sans);
font-size: var(--font-size-body);
line-height: var(--line-height-body);
font-weight: 300;
}
.helen-exhibitions__media {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: 0;
} .helen-exhibitions__media--empty {
display: flex;
align-items: center;
justify-content: center;
background: var(--color-surface-hero, #847180);
color: var(--color-text-on-dark, #ffffff);
}
.helen-exhibitions__card:nth-child(3n + 2) .helen-exhibitions__media--empty {
background: var(--color-surface-person, #a37176);
}
.helen-exhibitions__card:nth-child(3n) .helen-exhibitions__media--empty {
background: var(--color-surface-service, #9c989c);
}
.helen-exhibitions__media--empty svg {
display: block;
inline-size: 60%;
block-size: auto;
} .helen-exhibitions__head {
display: flex;
flex-direction: column;
}
.helen-exhibitions__date,
.helen-exhibitions__excerpt,
.helen-exhibitions__empty {
margin: 0;
} .helen-exhibitions__title {
margin: 0;
font: inherit;
font-weight: 600;
}
.helen-exhibitions__excerpt {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
line-clamp: 5;
overflow: hidden;
} .helen-exhibitions__card .helen-exhibitions__more,
.helen-exhibitions__card .helen-exhibitions__more:hover {
align-self: flex-start;
color: inherit;
font-weight: 600;
text-decoration: underline;
}
.helen-exhibitions__more::after {
content: "";
position: absolute;
inset: 0;
} .helen-exhibitions__more:focus-visible {
outline: none;
box-shadow: none;
}
.helen-exhibitions__card:has(.helen-exhibitions__more:focus-visible) {
outline: var(--space-3xs) solid var(--color-text-on-light, #4c4c4c);
outline-offset: var(--space-3xs);
} @media (max-width: 1024px) {
.helen-exhibitions {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.helen-exhibitions {
grid-template-columns: minmax(0, 1fr);
}
}