/**
 * Hero Fentanyl Component Styles
 *
 * @package JPK
 */

.hero-fentanyl {
    .hero-fentanyl-wrapper {
        gap: var(--spacing-lg);

        @media (max-width: 992px) {
            gap: 0;
        }
    }
    .hero-fentanyl-text {
        width: calc(50% - (var(--spacing-lg) / 2));
        margin-bottom: -1rem;

        @media (max-width: 992px) {
            width: 100%;
        }
        .hero-fentanyl-text-box {
            padding: 2.2rem;
            background: linear-gradient(to bottom, #000000 0%, #181818 100%);
            border: 1px solid rgba(255, 255, 255, .5);
            border-radius: var(--border-radius-secondary);
            margin-top: var(--spacing-md);

            @media (max-width: 768px) {
                padding: 1.5rem;
            }
            p {
                margin-bottom: 0;
            }
        }
    }
    .hero-fentanyl-quiz {
        width: calc(50% - (var(--spacing-lg) / 2));

        @media (max-width: 992px) {
            width: 100%;
            padding: var(--spacing-md) 0px;
        }
        .filterable-card {
            display: block;
            opacity: 1;
        }
        .quiz-binary-images-content {
            h2 {
                font-size: clamp(1.75rem, 1.25rem + 1.25vw, 2.25rem); 
            }
        }
    }
}