@media (min-width: 1025px) {
.grid-container.chadgpt-voucher-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(185px, auto);
gap: 10px;
margin: 0 auto;
width: 100%;
max-width: 100%;
} .grid-container.chadgpt-voucher-grid .card {
position: relative;
border-radius: 12px;
overflow: hidden;
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
background-color: #333;
width: 100%;
height: 100%;
min-height: 185px;
box-sizing: border-box;
} .grid-container.chadgpt-voucher-grid .card::after {
content: '';
position: absolute;
top: -5%;
left: -5%;
width: 110%;
height: 110%;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
z-index: 0;
}
.grid-container.chadgpt-voucher-grid:hover .card:not(:hover) {
position: relative;
}
.grid-container.chadgpt-voucher-grid:hover .card:not(:hover)::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.7);
transition: all 0.3s ease;
z-index: 1;
}
.grid-container.chadgpt-voucher-grid .card:hover {
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
z-index: 2;
} .grid-container.chadgpt-voucher-grid .card-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: flex-end;
padding: 20px;
padding-bottom: 0px;
transition: all 0.3s ease;
opacity: 1 !important;
transform: none !important;
z-index: 2;
} .grid-container.chadgpt-voucher-grid .card-hover-content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.8) 100%);
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: baseline;
padding: 20px;
padding-bottom: 15px;
opacity: 0 !important;
transition: all 0.4s ease;
z-index: 3;
}
.grid-container.chadgpt-voucher-grid .card:hover .card-overlay {
opacity: 0 !important;
transform: translateY(-20px) !important;
}
.grid-container.chadgpt-voucher-grid .card:hover .card-hover-content {
opacity: 1 !important;
transform: translateY(0) !important;
} .grid-container.chadgpt-voucher-grid .hover-title {
color: white;
font-size: 12px;
font-weight: 700;
margin-bottom: 5px !important;
text-align: left;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
}
.grid-container.chadgpt-voucher-grid .hover-description {
color: rgba(255, 255, 255, 0.9);
font-size: 12px;
line-height: 1.4;
text-align: left;
margin-bottom: 0px !important;
}
.grid-container.chadgpt-voucher-grid .card-title {
color: white;
font-size: 12px;
font-weight: 600;
line-height: 1.3;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
} .grid-container.chadgpt-voucher-grid .card-large {
grid-row: span 2;
}
.grid-container.chadgpt-voucher-grid .card-wide {
grid-column: span 2;
}
.grid-container.chadgpt-voucher-grid .card-small {
grid-row: span 1;
} .grid-container.chadgpt-voucher-grid .fixed-value::after {
background-image: url(//yoyorewards.com/wp-content/uploads/2025/08/fixed-value-voucher.webp);
}
.grid-container.chadgpt-voucher-grid .multiple-redemption::after {
background-image: url(//yoyorewards.com/wp-content/uploads/2025/11/multiple-redemption-image.webp);
}
.grid-container.chadgpt-voucher-grid .minimum-spend::after {
background-image: url(//yoyorewards.com/wp-content/uploads/2025/08/minimum-spend-voucher.webp);
}
.grid-container.chadgpt-voucher-grid .percentage::after {
background-image: url(//yoyorewards.com/wp-content/uploads/2025/08/percentage-voucher.webp);
}
.grid-container.chadgpt-voucher-grid .percentage-limits::after {
background-image: url(//yoyorewards.com/wp-content/uploads/2025/08/percentage-with-limits.webp);
}
.grid-container.chadgpt-voucher-grid .product-inclusions::after {
background-image: url(//yoyorewards.com/wp-content/uploads/2025/08/product-inclusions.webp);
}
.grid-container.chadgpt-voucher-grid .product-exclusions::after {
background-image: url(//yoyorewards.com/wp-content/uploads/2025/08/product-exclusions.webp);
}
.grid-container.chadgpt-voucher-grid .redemption-restriction::after {
background-image: url(//yoyorewards.com/wp-content/uploads/2025/11/redemption-restriction-image.webp);
}  @media (min-width: 1600px) {
.grid-container.chadgpt-voucher-grid {
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
} @media (min-width: 1359px) and (max-width: 1599px) {
.grid-container.chadgpt-voucher-grid {
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
} @media (min-width: 1025px) and (max-width: 1358px) {
.grid-container.chadgpt-voucher-grid {
grid-template-columns: repeat(4, 1fr);
gap: 8px;
grid-auto-rows: minmax(157px, auto);
}
}
} @media (max-width: 1024px) {
.grid-container.chadgpt-voucher-grid {
display: none !important;
}
}