:root {
--cpg-accent:       #c8a96e;
--cpg-accent-dark:  #a8893e;
--cpg-text:         #1a1a1a;
--cpg-muted:        #6b6b6b;
--cpg-border:       #e8e8e8;
--cpg-bg:           #ffffff;
--cpg-radius:       14px;
--cpg-shadow:       0 2px 10px rgba(0,0,0,0.07);
--cpg-shadow-hover: 0 8px 28px rgba(0,0,0,0.13);
--cpg-gap:          22px; --cpg-img-height:   400px;
--cpg-font-title:   'Georgia', 'Times New Roman', serif;
--cpg-font-body:    -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--cpg-transition:   0.26s cubic-bezier(0.4, 0, 0.2, 1);
}
.cosmod-grid-wrapper {
width: 100%;
font-family: var(--cpg-font-body);
color: var(--cpg-text);
position: relative;
} .cosmod-grid {
display: grid;
gap: var(--cpg-gap);
margin-bottom: 36px;
align-items: stretch;
}
.cosmod-cols-1 { grid-template-columns: 1fr; }
.cosmod-cols-2 { grid-template-columns: repeat(2, 1fr); }
.cosmod-cols-3 { grid-template-columns: repeat(3, 1fr); }
.cosmod-cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) {
.cosmod-cols-4 { grid-template-columns: repeat(2, 1fr); }
.cosmod-cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.cosmod-cols-2,
.cosmod-cols-3,
.cosmod-cols-4 {
grid-template-columns: 1fr;
}
:root {
--cpg-gap: 14px;
--cpg-img-height: 280px;
}
} .cosmod-card {
background: var(--cpg-bg);
border: 1px solid var(--cpg-border);
border-radius: var(--cpg-radius);
overflow: hidden;
display: flex;
flex-direction: column;
height: 100%;
box-shadow: var(--cpg-shadow);
transition:
transform var(--cpg-transition),
box-shadow var(--cpg-transition),
border-color var(--cpg-transition);
box-sizing: border-box;
}
.cosmod-card:hover {
transform: translateY(-4px);
box-shadow: var(--cpg-shadow-hover);
border-color: var(--cpg-accent);
} .cosmod-card__content {
flex: 1;
padding: 20px 20px 16px;
display: flex;
flex-direction: column;
gap: 10px;
} .cosmod-card__title {
font-family: var(--cpg-font-title);
font-size: 17px;
font-weight: 700;
line-height: 1.4;
margin: 0;
}
.cosmod-card__title a {
color: var(--cpg-text);
text-decoration: none;
transition: color var(--cpg-transition);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.cosmod-card__title a:hover {
color: var(--cpg-accent-dark);
} .cosmod-card__excerpt {
font-size: 14px;
line-height: 1.65;
color: var(--cpg-muted);
margin: 0;
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
} .cosmod-card__read-more {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 13px;
font-weight: 600;
color: var(--cpg-accent-dark);
text-decoration: none;
align-self: flex-start;
margin-top: auto;
padding-top: 4px;
transition:
gap var(--cpg-transition),
color var(--cpg-transition);
white-space: nowrap;
flex-shrink: 0;
}
.cosmod-card__read-more:hover {
color: var(--cpg-accent);
gap: 9px;
}
.cosmod-card__read-more svg {
flex-shrink: 0;
transition: transform var(--cpg-transition);
}
.cosmod-card__read-more:hover svg {
transform: translateX(3px);
} .cosmod-card__image-wrap {
width: 100%;
height: 400px;
min-height: 400px;
max-height: 400px;
flex-shrink: 0;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
border-top: 1px solid var(--cpg-border);
background: #f7f7f7;
box-sizing: border-box;
} .cosmod-card__image-link {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
} .cosmod-card__image {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center center;
display: block;
padding: 20px;
box-sizing: border-box;
background: #f7f7f7;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.cosmod-card:hover .cosmod-card__image {
transform: scale(1.04);
} .cosmod-card__image-wrap--empty {
display: flex;
align-items: center;
justify-content: center;
}
.cosmod-card__image-wrap--empty svg {
width: 52px;
height: 52px;
opacity: 0.35;
} .cosmod-no-posts {
grid-column: 1 / -1;
text-align: center;
color: var(--cpg-muted);
padding: 48px 24px;
font-size: 15px;
}