.lexani-lig-grid {
--lexani-lig-gap: 16px;
width: 100%;
}
.lexani-lig-grid__items {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--lexani-lig-gap);
margin: 0;
padding: 0;
}
.lexani-lig-grid__item {
margin: 0;
padding: 0;
}
.lexani-lig-grid__link {
display: block;
overflow: hidden;
border-radius: 4px;
line-height: 0;
text-decoration: none;
background: #f3f3f3;
transition: opacity 0.2s ease;
}
.lexani-lig-grid__link:hover,
.lexani-lig-grid__link:focus {
opacity: 0.9;
}
.lexani-lig-grid__image {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
}
.lexani-lig-grid__caption {
margin: 8px 0 0;
font-size: 0.875rem;
line-height: 1.4;
}
.lexani-lig-grid--empty {
padding: 1rem;
border: 1px dashed #c3c4c7;
border-radius: 4px;
text-align: center;
}
@media (max-width: 1024px) {
.lexani-lig-grid__items {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.lexani-lig-grid__items {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}