.page-item-detail {
border: 2px solid transparent;
border-radius: 8px;
overflow: hidden;
transition: all 0.3s ease;
background: linear-gradient(#1a1a1a, #1a1a1a) padding-box, linear-gradient(135deg, #667eea 0%, #764ba2 100%)
border-box;
}
.page-item-detail:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
} .page-item-detail:nth-child(4n + 1) {
background: linear-gradient(#1a1a1a, #1a1a1a) padding-box, linear-gradient(135deg, #667eea 0%, #764ba2 100%)
border-box;
}
.page-item-detail:nth-child(4n + 2) {
background: linear-gradient(#1a1a1a, #1a1a1a) padding-box, linear-gradient(135deg, #f093fb 0%, #f5576c 100%)
border-box;
}
.page-item-detail:nth-child(4n + 3) {
background: linear-gradient(#1a1a1a, #1a1a1a) padding-box, linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)
border-box;
}
.page-item-detail:nth-child(4n + 4) {
background: linear-gradient(#1a1a1a, #1a1a1a) padding-box, linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)
border-box;
} .page-item-detail:nth-child(4n + 1):hover {
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5), 0 0 20px rgba(118, 75, 162, 0.3);
}
.page-item-detail:nth-child(4n + 2):hover {
box-shadow: 0 8px 25px rgba(240, 147, 251, 0.5), 0 0 20px rgba(245, 87, 108, 0.3);
}
.page-item-detail:nth-child(4n + 3):hover {
box-shadow: 0 8px 25px rgba(79, 172, 254, 0.5), 0 0 20px rgba(0, 242, 254, 0.3);
}
.page-item-detail:nth-child(4n + 4):hover {
box-shadow: 0 8px 25px rgba(67, 233, 123, 0.5), 0 0 20px rgba(56, 249, 215, 0.3);
} .c-page__content .widget .page-item-detail {
border-width: 2px;
} @media (max-width: 768px) {
.page-item-detail {
border-width: 1.5px;
}
.page-item-detail:hover {
transform: translateY(-3px);
}
}
@media (max-width: 480px) {
.page-item-detail {
border-width: 1px;
}
}