:root {

    /* = Idox framework agnostic HTML/CSS
    ------------------------------------------------------------------------------------*/

    --spacing-1: 2px;
    --spacing-2: 4px;
    --spacing-3: 8px;
    --spacing-4: 12px;
    --spacing-5: 16px;
    --spacing-6: 20px;
    --spacing-7: 24px;
    --spacing-8: 32px;
    --spacing-9: 48px;
    --spacing-10: 64px;
    --spacing-11: 80px;
    --spacing-12: 96px;

    --border-radius-sm: 2px;
    --border-radius-md: 4px; /* Default */
    --border-radius-lg: 8px;

    /* Primary */
    --primary-500: #0A1F8F;
    --primary-600: #071564;

    /* Secondary */
    --secondary-500: #1E8ADC;
    --accessible-blue: #0D6CC9;

    /* Neutral */
    --neutral-25: #FCFCFC;
    --neutral-50: #F6F6F6;
    --neutral-100: #EFEFEF;
    --neutral-200: #E0E0E0;
    --neutral-300: #C2C2C2;
    --neutral-400: #A3A3A3;
    --neutral-500: #676767;
    --neutral-600: #282828;
    --neutral-800: #0A0A0A;

    --ice-white: #FCFCFD;
    --white: #FFF;

    }

            /* = Typescale 
    ------------------------------------------------------------------------------------*/

    /* BASIC MARGINS */

    body, h1, h2, h3, h4, h5, h6, ul, ol, dl, blockquote, p, address, table, fieldset, figure, pre 
    { margin: 0 0 16px; } /* Reset main type and give it a 16px bottom margin */

    p { line-height: 1.5rem}

    /* HEADINGS */
  
    h1, h2, h3 {color: var(--neutral-800)}


    /* VERTICAL SPACING UTILITY CLASSES */

    .mb-24 { margin-bottom: var(--spacing-7); }
    .mb-48 { margin-bottom: var(--spacing-9); }
    .mb-64 { margin-bottom: var(--spacing-10); }

    html, body { min-height: 100vh }

    /* SMALL SCREENS FIRST */
    body {
        background-image: url("bg-image.png"); /* The image used */
        background-color: var(--neutral-200); /* Used if the image is unavailable */
        background-position: center; /* Center the image */
        background-repeat: no-repeat; /* Do not repeat the image */
        background-size: cover; /* Resize the background image to cover the entire container */
        font-family: Arial, Helvetica, sans-serif; 
        font-size: 1rem;
        color: var(--neutral-600);
        text-align:center;
    }

    h1 { font-size: 1.25rem; }

    .product-name { 
        font-family: 'Times New Roman', Times, serif;
        font-size: 2rem;
        font-weight: bold;
        color: var(--primary-500);
        letter-spacing: -1px;
    }

    a:link, a:visited { 
        color: var(--accessible-blue);
    
    }

    a:hover {
        color: var(--primary-500);
        text-decoration: none;
    }

    .text-muted {
        color: var(--neutral-500)
    }
  
    .card {
        border-top: 6px solid var(--primary-500);
        background-color: var(--white);
        border-radius:var(--border-radius-md);
        text-align: center;
        width:85%;
        margin: auto;
        padding: var(--spacing-5);
        padding-top: var(--spacing-9);
        margin-top: var(--spacing-4)
    }

    .card img {
        width: 75px;
    }

    .card p {
        padding-left: var(--spacing-4);
        padding-right: var(--spacing-4);
    }

    @media (min-width: 640px) {
        .card {
            width: 70%;
            padding: var(--spacing-8);
            margin-top: var(--spacing-8);
        }
            .card img {
            width: 100px;
        }  
        .product-name { 
        font-size: 2.5rem;
        }
        h1 { 
            font-size: 1.5rem; 
        }
}
    @media (min-width: 768px) {
        .card {
            width: 50%;
            padding: var(--spacing-9);
            margin-top: var(--spacing-8);
    } 
}
    @media (min-width: 1024px) {
        .card {
            width: 35%;
            margin-top: 8%  
    } 
}
    @media (min-width: 1280px) {

}
    @media (min-width: 1600px) {
        .card p {
        padding-left: var(--spacing-10);
        padding-right: var(--spacing-10);
    }
}