.grid-card:hover {
    background-color: var(--color-primary) !important;
}

/* Disable hover effects on CTA cards with images */
.grid-card.cta-card:hover,
.grid-card:has(.cta-card-content):hover {
    background-color: transparent !important;
    background: transparent !important;
}

.results-card {
    padding: 1.5rem !important;
}

@media (min-width: 768px) {
    .results-container {
        padding-top: 0 !important;
        border: none !important;
    }

    .grid-card {
        width: 100% !important;
        flex: 1 !important;
    }

    .results.first-row {
        border-bottom: 1px dashed var(--color-dashed-border) !important;
        border-image: repeating-linear-gradient(to right, var(--color-dashed-border) 0, var(--color-dashed-border) 6px, transparent 6px, transparent 10px) 1 !important;
        border-image-slice: 1 !important;
    }

    .results.second-row {
        border-top: 1px dashed var(--color-dashed-border) !important;
        border-image: repeating-linear-gradient(to right, var(--color-dashed-border) 0, var(--color-dashed-border) 6px, transparent 6px, transparent 10px) 1 !important;
        border-image-slice: 1 !important;
    }

    .grid-card.one,
    .gap-4.p-7.grid-card.three {
        border: none !important;
        border-bottom: none !important;
        border-right: 1px dashed var(--color-dashed-border) !important;
        border-image: repeating-linear-gradient(to bottom, var(--color-dashed-border) 0, var(--color-dashed-border) 6px, transparent 6px, transparent 10px) 1 !important;
        border-image-slice: 1 !important;
    }

    .grid-card.two,
    .grid-card.four {
        border: none !important;
        border-bottom: none !important;
        border-left: 1px dashed var(--color-dashed-border) !important;
        border-image: repeating-linear-gradient(to bottom, var(--color-dashed-border) 0, var(--color-dashed-border) 6px, transparent 6px, transparent 10px) 1 !important;
        border-image-slice: 1 !important;
    }
}