.cpc-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
height: 500px;
} .cpc-col {
display: flex;
flex-direction: column;
gap: 20px;
min-height: 0;
}
.cpc-col.middle .cpc-card {
flex: 1;
}
.cpc-col.single .cpc-card {
flex: 1;
} .cpc-card {
background: #f5f5f5;
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
transition: transform .35s ease, box-shadow .35s ease;
box-shadow:
3px 3px 0 rgba(0, 0, 0, 0.05),
0 0 0 rgba(0,0,0,0);
}
.cpc-card:hover {
transform: translateY(-6px);
box-shadow: 0 18px 40px rgba(0,0,0,.18);
} .cpc-thumb {
flex: 7;
position: relative;
overflow: hidden;
}
.cpc-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .6s ease;
} .cpc-card:hover .cpc-thumb img {
transform: scale(1.08);
} .cpc-thumb::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,.45));
opacity: 0;
transition: opacity .35s ease;
}
.cpc-card:hover .cpc-thumb::after {
opacity: 1;
} .cpc-category {
position: absolute;
left: 0px;
bottom: 0px;
background:#a93c25;
color: #fff;
padding: 5px 12px;
font-size: 13px;
z-index: 2;
} .cpc-content {
flex: 3;
padding: 14px 16px;
display: flex;
align-items: center;
background: white;
}
.cpc-title {
font-size: 16px;
font-weight: 300;
line-height: 1.4;
}
.cpc-title a {
color: #222;
text-decoration: none !important;
}
.cpc-card:hover .cpc-title a {
color: #a8743b; text-decoration: none;
}
@media (max-width: 1024px) {
.cpc-grid {
grid-template-columns: repeat(2, 1fr);
height: auto;
}
.cpc-col.middle {
grid-column: span 2;
height: 420px;
}
}
@media (max-width: 767px) {
.cpc-grid {
grid-template-columns: 1fr;
height: auto;
}
.cpc-col {
height: auto;
}
.cpc-card {
height: 320px;
}
} .cpc-v2-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 20px;
height: 500px; } .cpc-v2-left {
height: 100%;
display: grid;
grid-template-rows: 1fr 1fr; gap: 20px;
min-height: 0;
} .cpc-v2-feature {
height: 100%;
min-height: 0;
} .cpc-v2-bottom {
height: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
min-height: 0;
} .cpc-v2-right {
height: 100%;
min-height: 0;
} .cpc-v2-card {
height: 100%; display: flex;
flex-direction: column;
background: #f5f5f5;
min-height: 0;
box-shadow:
3px 3px 0 rgba(0, 0, 0, 0.05),
0 0 0 rgba(0,0,0,0);
}  .cpc-v2-card.thumb-80 .cpc-v2-thumb {
flex: 8;
} .cpc-v2-card.thumb-70 .cpc-v2-thumb {
flex: 7;
}
.cpc-v2-thumb {
position: relative;overflow: hidden;
}
.cpc-v2-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
} .cpc-v2-content {
flex: 3;
padding: 12px;
background-color: white;
} .cpc-v2-category {
position: absolute;
bottom: 5px;
left: 0px;
background:#a93c25;
color: #fff;
padding: 5px 12px;
font-size: 13px;
white-space: nowrap;z-index: 2;
}
.cpc-v2-category.right {
left: auto;
right: 0px;
} .cpc-v2-content a {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.4;
text-decoration: none !important;
color: black;
font-weight: 300;
}  .cpc-v2-card,
.cpc-v2-thumb img,
.cpc-v2-content,
.cpc-v2-category {
transition: all .45s ease;
} .cpc-v2-thumb::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(0,0,0,0) 40%,
rgba(0,0,0,.55) 100%
);
opacity: 0;
transition: opacity .45s ease;
z-index: 1;
} .cpc-v2-card:hover .cpc-v2-thumb img {
transform: scale(1.08);
} .cpc-v2-card:hover .cpc-v2-thumb::after {
opacity: 1;
} .cpc-v2-category {
transform: translateY(6px);
opacity: .9;
}
.cpc-v2-card:hover .cpc-v2-category {
transform: translateY(0);
opacity: 1;
} .cpc-v2-content {
transform: translateY(6px);
opacity: .85;
}
.cpc-v2-card:hover .cpc-v2-content {
transform: translateY(0);
opacity: 1;
} 
.cpc-v2-card:hover .cpc-v2-content a{
color: #a8743b; text-decoration: none;
} @media (max-width: 1024px) {
.cpc-v2-grid {
grid-template-columns: 1fr;
height: auto;
}
.cpc-v2-left,
.cpc-v2-right {
height: auto;
}
.cpc-v2-left {
grid-template-rows: auto auto;
}
.cpc-v2-bottom {
grid-template-columns: 1fr 1fr;
}
.cpc-v2-card {
height: 380px;
}
} @media (max-width: 768px) {
.cpc-v2-grid {
gap: 30px;
}
.cpc-v2-left,
.cpc-v2-bottom {
display: block;
}
.cpc-v2-card {
height: 420px;
margin-bottom: 30px;
border-radius: 14px;
overflow: hidden;
}
.cpc-v2-thumb img {
transform: none !important;
}
.cpc-v2-content {
font-size: 16px;
}
}