:root {
    --red-500: #eb1700;
    --spacing-12: 64px;
    --spacing-10: 48px;
    --spacing-09: 40px;
    --spacing-06: 24px;
    --spacing-13: 80px;
    --black: black;
    --padding-02: 12px;
    --white: white;
    --padding-01: 8px;
    --padding-00: 0px;
    --padding-07: 80px;
    --spacing-03: 12px;
    --padding-06: 64px;
    --padding-05: 32px;
    --padding-04: 24px;
    --spacing-08: 32px;
    --padding-03: 16px;
    --spacing-11: 56px;
    --spacing-04: 16px;
    --spacing-05: 20px;
    --spacing-00: 0px;
    --gray-100: #f9f8f7;
    --gray-800: #564c47;
    --spacing-02: 8px;
    --red-600: #cc1400;
    --red-700: #ad1100;
    --gray-200: #f1efed;
    --gray-300: #e8e6e3;
    --gray-400: #d5cfc9;
    --gray-500: #c1bbb3;
    --gray-600: #a39992;
    --gray-700: #81766f;
    --gray-900: #312c2a;
    --blue-400: #69d0ff;
    --blue-600: #0f68b2;
    --font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    --spacing-01: 4px;
    --spacing-07: 28px;
    --spacing-14: 96px;
    --radius-00: 0px;
    --radius-9999: 9999px;
}

/** FONTS **/
@font-face {
    font-family: 'Johnsontext';
    src: url('../../assets/fonts/JohnsonText-Regular.woff') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Johnsontext';
    src: url('../../assets/fonts/JohnsonText-Bold.woff') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Johnsontext';
    src: url('../../assets/fonts/JohnsonText-Light.woff') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Johnsontext';
    src: url('../../assets/fonts/JohnsonText-Medium.woff') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Johnsondisplay';
    src: url('../../assets/fonts/JohnsonDisplay-Medium.woff') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Johnsondisplay';
    src: url('../../assets/fonts/JohnsonDisplay-Regular.woff') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Johnsondisplay';
    src: url('../../assets/fonts/JohnsonDisplay-Light.woff') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Johnsondisplay';
    src: url('../../assets/fonts/JohnsonDisplay-Bold.woff') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Signpainterhousescript';
    src: url('../../assets/fonts/SignPainterHouseScript.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/** HOME STYLE **/

.mbJnJ-device-container {
    padding: var(--padding-05) var(--padding-00);
    grid-column-gap: var(--spacing-08);
    grid-row-gap: var(--spacing-08);
    flex-flow: column;
    justify-content: flex-start;
    align-items: stretch;
    display: flex;
}

.mbJnJ-header-wrapper {
    padding-right: var(--spacing-13);
    padding-left: var(--spacing-13);
    font-family: Johnsondisplay, Arial, sans-serif;
}

.mbJnJ-device-wrapper {
    padding: var(--spacing-09) var(--spacing-13);
    grid-column-gap: var(--spacing-04);
    grid-row-gap: var(--spacing-04);
    grid-template-rows: 1fr;
    grid-template-columns: .75fr .75fr 1fr .5fr .5fr;
    grid-auto-rows: 1fr;
    grid-auto-columns: 1fr;
    grid-auto-flow: row dense;
    align-content: stretch;
    justify-content: stretch;
    align-items: end;
    justify-items: center;
    display: grid;
}

.mbJnJ-device-item {
    grid-column-gap: var(--spacing-05);
    grid-row-gap: var(--spacing-05);
    flex-flow: column;
    justify-content: flex-end;
    align-items: stretch;
    font-family: Johnsontext, Arial, sans-serif;
    display: flex;
}

.mbJnJ-device-item:hover .mbJnJ-device-img {
    transform: translate3d(0px, 0px, 0px) scale3d(1.025, 1.025, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    transform-style: preserve-3d;
}

.mbJnJ-device-link {
    padding: var(--spacing-00);
    grid-column-gap: var(--spacing-05);
    grid-row-gap: var(--spacing-05);
    color: var(--black);
    text-align: center;
    border-radius: 16px;
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
    min-width: auto;
    min-height: auto;
    text-decoration: none;
    display: flex;
}

.mbJnJ-device-link:hover {
    text-decoration: underline;
}

.mbJnJ-device-img {
    min-width: 0;
    height: auto;
    max-height: 120px;
    transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    transform-style: preserve-3d;
    transition: transform 0.3s ease;
}

.mbJnJ-heading-04 {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 20px;
    line-height: 110%;
}

/** RESPONSIVE STYLE **/

@media screen and (max-width: 991px) {

    .mbJnJ-device-container {
        grid-column-gap: var(--spacing-08);
        grid-row-gap: var(--spacing-08);
    }

    .mbJnJ-header-wrapper {
        padding-right: var(--spacing-09);
        padding-left: var(--spacing-09);
    }

    .mbJnJ-device-wrapper {
        padding-right: var(--spacing-09);
        padding-left: var(--spacing-09);
        grid-column-gap: var(--spacing-08);
        grid-row-gap: var(--spacing-08);
        grid-template-rows: 1fr auto;
        grid-template-columns: 1fr 1fr 1fr;
        grid-auto-flow: row dense;
        align-content: center;
        justify-content: center;
    }

    .mbJnJ-device-item {
        grid-column-gap: var(--spacing-04);
        grid-row-gap: var(--spacing-04);
    }

    .mbJnJ-device-link {
        grid-column-gap: var(--spacing-05);
        grid-row-gap: var(--spacing-05);
    }

    .mbJnJ-device-link:hover {
        background-color: rgba(0, 0, 0, 0);
    }
}

@media screen and (max-width: 767px) {

    .mbJnJ-device-container {
        padding-top: var(--padding-04);
        padding-bottom: var(--padding-04);
        grid-column-gap: var(--spacing-06);
        grid-row-gap: var(--spacing-06);
    }

    .mbJnJ-header-wrapper {
        padding-right: var(--spacing-06);
        padding-left: var(--spacing-06);
    }

    .mbJnJ-device-wrapper {
        padding-right: var(--spacing-06);
        padding-left: var(--spacing-06);
        grid-column-gap: var(--spacing-08);
        grid-row-gap: var(--spacing-08);
        grid-template-columns: 1fr 1fr;
    }

    .mbJnJ-device-item {
        grid-column-gap: var(--spacing-04);
        grid-row-gap: var(--spacing-04);
        justify-content: flex-end;
        align-items: stretch;
    }

    .mbJnJ-device-link {
        grid-column-gap: var(--spacing-04);
        grid-row-gap: var(--spacing-04);
        justify-content: center;
        height: 200px;
    }
}

@media screen and (max-width: 479px) {

    .mbJnJ-device-container {
        padding-top: var(--padding-03);
        padding-bottom: var(--padding-03);
        grid-column-gap: var(--spacing-06);
        grid-row-gap: var(--spacing-06);
    }

    .mbJnJ-header-wrapper {
        padding-right: var(--spacing-11);
        padding-left: var(--spacing-06);
    }

    .mbJnJ-device-wrapper {
        grid-column-gap: var(--spacing-06);
        grid-row-gap: var(--spacing-06);
        grid-template-columns: 1fr;
    }

    .mbJnJ-device-link {
        grid-column-gap: var(--spacing-04);
        grid-row-gap: var(--spacing-04);
    }

    #mbJnJ-_40b60e02-2c78-838c-07e7-64ff19dddd5e-50339f85 {
        grid-area: span 1 / span 1 / span 1 / span 1;
        align-self: stretch;
        justify-self: stretch;
    }

    #mbJnJ-_4926bfc4-feaf-6210-a1be-0c90cf96c6c0-50339f85,
    #mbJnJ-_267865a7-4e94-4c7b-0dc6-82c85e212ca1-50339f85,
    #mbJnJ-ab292019-76cd-2dbd-a79b-f511be87f4c8-50339f85,
    #mbJnJ-e3d757b5-5782-5804-00ac-c3e84304504b-50339f85 {
        align-self: stretch;
        justify-self: stretch;
    }
}