.cpc-v3-left.is-feature .cpc-thumb img {
object-position: center bottom !important;
}
.cpc-card.is-feature .cpc-thumb img {
object-position: center bottom!important;
}
.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;
}
.single .cpc-thumb img{
min-height: 332px !important;
} .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-right .cpc-v2-thumb img {
min-height: 332px !important;
} .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;
}
} .cpc-v3-grid {
display: flex;
gap: 20px;
height: 500px;
} .cpc-v3-left,
.cpc-v3-right {
display: flex;
flex-direction: column;
gap: 20px;
min-height: 0;
}
.cpc-v3-left {
flex: 0 0 60%;
}
.cpc-v3-right {
flex: 0 0 40%;
} .cpc-card {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}
.cpc-v3-left .cpc-card,
.cpc-v3-right .cpc-card {
flex: 1;
} .cpc-thumb {
flex: 7;
position: relative;
}
.cpc-content {
flex: 3;
background: #fff;
padding: 14px 16px;
}
.cpc-v3-left .cpc-thumb{
flex: 8;
}
.cpc-v3-left .cpc-content {
flex: 2;
} @media (max-width: 1024px) {
.cpc-v3-grid {
flex-direction: column;
height: auto;
}
.cpc-v3-left,
.cpc-v3-right {
flex: 1;
}
}
@media (max-width: 767px) {
.cpc-v3-grid {
gap: 30px;
}
.cpc-card {
height: 320px;
}
} .cpc-v4-grid {
display: grid;
grid-template-columns: 1fr 2fr; gap: 20px;
height: 500px;
} .cpc-v4-left {
height: 100%;
min-height: 0;
}
.cpc-v4-left .cpc-v2-card {
height: 100%;
} .cpc-v4-right {
height: 100%;
display: grid;
grid-template-rows: 1fr 1fr; gap: 20px;
min-height: 0;
} .cpc-v4-feature {
height: 100%;
min-height: 0;
} .cpc-v4-bottom {
height: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
min-height: 0;
} .cpc-v4-grid .cpc-v2-card {
height: 100%;
min-height: 0;
} .cpc-v4-left .cpc-v2-thumb img {
object-fit: cover;
object-position: center center;
min-height: 332px;
} @media (max-width: 1024px) {
.cpc-v4-grid {
grid-template-columns: 1fr;
height: auto;
}
.cpc-v4-left,
.cpc-v4-right {
height: auto;
}
.cpc-v4-right {
grid-template-rows: auto auto;
}
.cpc-v4-bottom {
grid-template-columns: 1fr 1fr;
}
.cpc-v2-card {
height: 380px;
}
} @media (max-width: 768px) {
.cpc-v4-grid {
gap: 30px;
}
.cpc-v4-right,
.cpc-v4-bottom {
display: block;
}
.cpc-v2-card {
height: 420px;
margin-bottom: 30px;
border-radius: 14px;
overflow: hidden;
}
}