.jm-cat-banner {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
.jm-cat-banner__images {
display: grid;
grid-template-columns: 1fr;
} .jm-cat-banner__images--3 .jm-cat-banner__figure:not(.jm-cat-banner__figure--primary) {
display: none;
}
.jm-cat-banner__figure {
position: relative;
margin: 0;
overflow: hidden;
}
.jm-cat-banner__image {
display: block;
width: 100%;
height: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
} .jm-cat-banner__content--overlay {
position: absolute;
inset: 0;
z-index: var(--z-base);
justify-content: flex-end;
align-items: flex-start;
padding: var(--space-6);
background: linear-gradient(to top, rgb(28 25 23 / 70%) 0%, rgb(28 25 23 / 0%) 55%);
color: var(--color-text-inverse);
}
.jm-cat-banner__title {
font-size: var(--fs-h3);
line-height: var(--lh-heading);
color: var(--color-text);
}
.jm-cat-banner__text {
max-width: var(--container-text);
font-size: var(--fs-base);
color: var(--color-text-muted);
}
.jm-cat-banner__content--overlay .jm-cat-banner__title {
color: var(--color-text-inverse);
text-align:left;
margin: 0;
}
.jm-cat-banner__content--overlay .jm-cat-banner__text {
color: var(--color-text-light);
}
@media (min-width: 782px) {
.jm-cat-banner__images--2 {
grid-template-columns: repeat(2, 1fr);
}
.jm-cat-banner__images--3 {
grid-template-columns: repeat(3, 1fr);
}
.jm-cat-banner__images--3 .jm-cat-banner__figure:not(.jm-cat-banner__figure--primary) {
display: block;
}
.jm-cat-banner__title {
font-size: var(--fs-h2);
}
}