.primo-list {
--primo-gap: 1.5rem; --primo-columns: 3;
--primo-columns-tablet: 2;
--primo-columns-mobile: 1;
--primo-radius: var(--wp--custom--radius, 8px);
--primo-bg: var(--wp--preset--color--base, #ffffff);
--primo-surface: var(--wp--preset--color--base-2, #f6f7f9); --primo-tile-bg: transparent;
--primo-text: var(--wp--preset--color--contrast, #1a1a1a);
--primo-muted: #6b7280;
--primo-accent: var(--wp--preset--color--primary, #2563eb);
--primo-border: rgba(0, 0, 0, 0.08);
--primo-fit-ratio: 4 / 3; color: var(--primo-text);
font-family: inherit;
}
.primo-list__grid {
display: grid;
grid-template-columns: repeat(var(--primo-columns), minmax(0, 1fr));
gap: var(--primo-gap);
} .primo-list__tile {
position: relative;
display: flex;
flex-direction: column;
background: var(--primo-bg);
border: 1px solid var(--primo-border);
border-radius: var(--primo-radius);
overflow: hidden;
} .primo-list__edit {
position: absolute;
top: 0.4rem;
right: 0.4rem;
z-index: 3;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.9rem;
height: 1.9rem;
border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
color: #1a1a1a;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
text-decoration: none;
opacity: 0.85;
transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.primo-list__edit:hover,
.primo-list__edit:focus {
opacity: 1;
background: #fff;
color: var(--primo-accent);
}
.primo-list__edit-icon {
display: block;
}
.primo-list__tile--grid {
padding: 0;
text-align: center;
}
.primo-list__tile--wall {
padding: 1rem;
align-items: center;
justify-content: center;
aspect-ratio: 3 / 2;
} .primo-list--list .primo-list__grid {
grid-template-columns: minmax(0, 1fr);
}
.primo-list__tile--list {
flex-direction: row;
align-items: stretch;
gap: 0;
padding: 0;
text-align: left;
}
.primo-list__tile--list .primo-list__logo {
flex: 0 0 auto;
width: 220px;
max-width: 42%;
aspect-ratio: 1 / 1; height: auto;
margin: 0;
overflow: hidden;
}
.primo-list__tile--list .primo-list__zoom,
.primo-list__tile--list .primo-list__logo > a {
width: 100%;
height: 100%;
}
.primo-list__tile--list img.primo-list__img {
width: 100%;
height: 100%;
max-height: none;
object-fit: cover; }
.primo-list__tile--list .primo-list__body {
flex: 1 1 auto;
justify-content: center;
padding: 1.25rem 1.5rem;
}
.primo-list__tile--list .primo-list__cta {
margin: 0.75rem 0 0;
}
@media (max-width: 600px) {
.primo-list__tile--list .primo-list__logo {
width: 130px;
}
} .primo-list__logo {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
} .primo-list__tile--grid .primo-list__logo {
margin-bottom: 0;
}
.primo-list__tile--grid .primo-list__zoom,
.primo-list__tile--grid .primo-list__logo > a {
width: 100%;
}
.primo-list__tile--grid img.primo-list__img {
width: 100%;
height: auto;
max-height: none;
} .primo-list--framed .primo-list__tile--grid .primo-list__logo {
width: 100%;
height: auto;
aspect-ratio: var(--primo-fit-ratio); overflow: hidden;
box-sizing: border-box;
}
.primo-list--framed .primo-list__tile--wall {
aspect-ratio: var(--primo-fit-ratio);
}
.primo-list--framed .primo-list__tile--grid .primo-list__zoom,
.primo-list--framed .primo-list__tile--grid .primo-list__logo > a {
width: 100%;
height: 100%;
}
.primo-list--framed img.primo-list__img {
width: 100%;
height: 100%;
max-height: none;
}
.primo-list--framed.primo-list--fit-cover img.primo-list__img {
object-fit: cover;
}
.primo-list--framed.primo-list--fit-contain img.primo-list__img {
object-fit: contain; } .primo-list--framed.primo-list--fit-contain .primo-list__tile--grid .primo-list__logo {
padding: 8%;
background: var(--primo-tile-bg);
}
.primo-list__tile--wall .primo-list__logo,
.primo-list__tile--wall .primo-list__link {
width: 100%;
height: 100%;
}
.primo-list__img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain; }
.primo-list__img--placeholder {
display: flex;
align-items: center;
justify-content: center;
width: 80px;
height: 80px;
border-radius: 50%;
background: var(--primo-surface);
color: var(--primo-muted);
font-size: 2rem;
font-weight: 700;
text-transform: uppercase;
}
.primo-list__link,
.primo-list__logo a {
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
} .primo-list__body {
display: flex;
flex-direction: column;
flex: 1 1 auto;
padding: 1rem 1.25rem 1.25rem; hyphens: auto;
overflow-wrap: break-word;
}
.primo-list__title {
margin: 0 0 0.25rem;
font-size: 1.15rem;
line-height: 1.3;
}
.primo-list__title a {
color: inherit;
text-decoration: none;
}
.primo-list__title a:hover {
text-decoration: underline;
}
.primo-list__subtitle {
margin: 0 0 0.75rem;
color: var(--primo-muted);
font-style: italic;
}
.primo-list__text {
margin: 0 0 1rem;
font-size: 0.95rem;
line-height: 1.5;
}
.primo-list__text > :last-child {
margin-bottom: 0;
} .primo-list__cta {
margin: auto 0 0;
}
.primo-list__button {
display: inline-block;
padding: 0.5rem 1.1rem;
border-radius: var(--primo-radius);
background: var(--primo-accent);
color: #ffffff;
text-decoration: none;
font-weight: 600;
line-height: 1.2;
}
.primo-list__button:hover,
.primo-list__button:focus {
filter: brightness(0.92);
color: #ffffff;
} .primo-list__heading {
margin: 1.5rem 0 0.75rem;
padding-bottom: 0.35rem;
border-bottom: 2px solid var(--primo-accent);
font-size: 1.3rem;
}
.primo-list__heading:first-child {
margin-top: 0;
} .primo-list--single {
text-align: center;
margin-bottom: 1.5rem;
}
.primo-list--single .primo-list__logo {
height: 160px;
margin-bottom: 1rem;
} .primo-list--empty {
color: var(--primo-muted);
font-style: italic;
} .primo-list__zoom {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
cursor: zoom-in;
text-decoration: none;
}
body.primo-list-lightbox-open {
overflow: hidden;
}
.primo-list-lightbox {
position: fixed;
inset: 0;
z-index: 100000;
display: flex;
align-items: center;
justify-content: center;
padding: 3.5rem 1rem;
background: rgba(0, 0, 0, 0.88);
}
.primo-list-lightbox[hidden] {
display: none;
}
.primo-list-lightbox__backdrop {
position: absolute;
inset: 0;
cursor: zoom-out;
}
.primo-list-lightbox__figure {
position: relative;
z-index: 1;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
max-width: 100%;
max-height: 100%;
}
.primo-list-lightbox__img {
max-width: min(92vw, 1400px);
max-height: 82vh;
width: auto;
height: auto;
object-fit: contain;
background: #fff;
border-radius: 4px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.primo-list-lightbox__caption {
margin-top: 0.9rem;
max-width: min(92vw, 1400px);
text-align: center;
color: #fff;
line-height: 1.4;
}
.primo-list-lightbox__title {
display: block;
font-weight: 700;
font-size: 1.05rem;
}
.primo-list-lightbox__subtitle {
display: block;
color: rgba(255, 255, 255, 0.75);
font-style: italic;
font-size: 0.92rem;
}
.primo-list-lightbox__counter {
display: block;
margin-top: 0.35rem;
color: rgba(255, 255, 255, 0.6);
font-size: 0.82rem;
}
.primo-list-lightbox__btn {
position: absolute;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
color: #fff;
font-size: 1.6rem;
line-height: 1;
cursor: pointer;
}
.primo-list-lightbox__btn:hover,
.primo-list-lightbox__btn:focus {
background: rgba(255, 255, 255, 0.28);
outline: none;
}
.primo-list-lightbox__btn:focus-visible {
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6);
}
.primo-list-lightbox__close {
top: 1rem;
right: 1rem;
}
.primo-list-lightbox__close::before {
content: "\00d7"; }
.primo-list-lightbox__prev {
left: 1rem;
top: 50%;
transform: translateY(-50%);
}
.primo-list-lightbox__prev::before {
content: "\2039"; font-size: 2.4rem;
}
.primo-list-lightbox__next {
right: 1rem;
top: 50%;
transform: translateY(-50%);
}
.primo-list-lightbox__next::before {
content: "\203a"; font-size: 2.4rem;
}  @media (max-width: 782px) {
.primo-list__grid {
grid-template-columns: repeat(var(--primo-columns-tablet), minmax(0, 1fr));
}
.primo-list-lightbox__prev {
left: 0.5rem;
}
.primo-list-lightbox__next {
right: 0.5rem;
}
}
@media (max-width: 480px) {
.primo-list__grid {
grid-template-columns: repeat(var(--primo-columns-mobile), minmax(0, 1fr));
} .primo-list__title {
font-size: clamp(0.8rem, calc(1.15rem - (var(--primo-columns-mobile) - 1) * 0.18rem), 1.15rem);
}
.primo-list__subtitle {
font-size: clamp(0.75rem, calc(1rem - (var(--primo-columns-mobile) - 1) * 0.12rem), 1rem);
} .primo-list__body {
padding-right: clamp(0.4rem, calc(1.25rem - (var(--primo-columns-mobile) - 1) * 0.45rem), 1.25rem);
padding-left: clamp(0.4rem, calc(1.25rem - (var(--primo-columns-mobile) - 1) * 0.45rem), 1.25rem);
}
}
@media (prefers-reduced-motion: no-preference) {
.primo-list-lightbox__img {
transition: opacity 0.15s ease;
}
}