/* ==========================================================
   LOCALHOSTING UK — COMMUNITY PAGE
   Twenty-One theme / localhostinguk

   Matched to:
   - hosting.css
   - pricing.css
   - Community TPL
   ========================================================== */


/* ==========================================================
   PAGE ROOT
   ========================================================== */

.lhuk-community-page {

    --lhuk-bg: #ffffff;

    --lhuk-surface: #f3f3f8;
    --lhuk-surface-soft: #f7f7fa;
    --lhuk-surface-purple: #f0edfb;

    --lhuk-text: #17182f;
    --lhuk-heading: #151936;

    --lhuk-muted: #69708e;
    --lhuk-text-soft: #70758e;
    --lhuk-text-muted: #85899d;

    --lhuk-border: #d9d9e5;
    --lhuk-border-strong: #c8c8da;

    --lhuk-purple: #8064ed;
    --lhuk-purple-bright: #9278ff;

    --lhuk-purple-soft: rgba(128, 100, 237, .12);

    width: 100vw !important;
    max-width: none !important;

    position: relative;

    left: 50%;

    margin-left: -50vw !important;
    margin-right: 0 !important;

    padding: 0 0 70px !important;

    background: var(--lhuk-bg);

    color: var(--lhuk-text);

    font-family:
        "Poppins",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    overflow: hidden;

    transition:
        background-color .25s ease,
        color .25s ease;
}


/* ==========================================================
   REMOVE WHMCS MAIN BODY GUTTERS
   Same approach as Pricing / Hosting
   ========================================================== */

#main-body:has(.lhuk-community-page) {

    padding-top: 0 !important;
    padding-bottom: 0 !important;

    background: var(--lhuk-bg);
}


#main-body:has(.lhuk-community-page) > .container {

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
}


#main-body:has(.lhuk-community-page) > .container > .row {

    margin-left: 0 !important;
    margin-right: 0 !important;

}


/* ==========================================================
   INNER CONTENT WIDTH
   Same as Hosting / Pricing
   ========================================================== */

.lhuk-community-container {

    width:
        min(
            1160px,
            calc(100% - 48px)
        );

    max-width: 1160px;

    margin-left: auto !important;
    margin-right: auto !important;

    box-sizing: border-box;
}


/* ==========================================================
   GLOBAL BOX SIZING
   ========================================================== */

.lhuk-community-page *,
.lhuk-community-page *::before,
.lhuk-community-page *::after {

    box-sizing: border-box;

}


.lhuk-community-page h1,
.lhuk-community-page h2,
.lhuk-community-page h3,
.lhuk-community-page p {

    margin-top: 0;

}


.lhuk-community-page a {

    text-decoration: none;

}


/* ==========================================================
   HERO
   ========================================================== */

.lhuk-community-hero {

    width: 100%;

    padding:
        70px
        0
        55px;

    background:
        var(--lhuk-bg);

}


.lhuk-community-pill {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding:
        8px
        15px;

    margin-bottom: 20px;

    border-radius: 999px;

    background:
        var(--lhuk-purple-soft);

    color:
        var(--lhuk-purple);

    font-size: 12px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: .06em;

}


.lhuk-community-hero h1 {

    max-width: 900px;

    margin:
        0
        0
        22px;

    color:
        var(--lhuk-heading) !important;

    font-size:
        clamp(
            48px,
            5.2vw,
            70px
        );

    line-height: 1.02;

    font-weight: 500;

    letter-spacing: -.045em;

}


.lhuk-community-lead {

    max-width: 720px;

    margin: 0;

    color:
        var(--lhuk-text-soft);

    font-size: 17px;

    line-height: 1.6;

}


/* ==========================================================
   GENERAL COMMUNITY SECTION
   ========================================================== */

.lhuk-community-section {

    width: 100%;

    padding:
        38px
        0;

    background:
        var(--lhuk-bg);

}


/* ==========================================================
   SECTION HEADING
   ========================================================== */

.lhuk-section-heading {

    margin-bottom: 24px;

}


.lhuk-section-heading h2 {

    margin:
        0
        0
        7px;

    color:
        var(--lhuk-text);

    font-size: 27px;

    line-height: 1.2;

    font-weight: 400;

    letter-spacing: -.025em;

}


.lhuk-section-heading p {

    margin: 0;

    color:
        var(--lhuk-text-soft);

    font-size: 13px;

    line-height: 1.65;

}


/* ==========================================================
   SECTION KICKER
   ========================================================== */

.lhuk-section-kicker {

    display: block;

    color:
        var(--lhuk-purple);

    font-size: 10px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: .20em;

    text-transform: uppercase;

}


/* ==========================================================
   THE WALL
   ========================================================== */

.lhuk-wall-section {
    padding: 42px 0 52px;
}


/* Section heading */

.lhuk-wall-section .lhuk-section-heading {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin: 0 0 20px;
}

.lhuk-wall-section .lhuk-section-heading h2 {
    margin: 0;
    color: var(--lhuk-text);
    font-size: 27px;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: -0.025em;
}

.lhuk-wall-section .lhuk-section-heading p {
    margin: 0;
    color: var(--lhuk-text-soft);
    font-size: 13px;
    line-height: 1.5;
}


/* ==========================================================
   WALL GRID

   IMPORTANT:
   5 columns on desktop.
   The 6th card wraps to row 2.
   ========================================================== */

.lhuk-wall-grid {
    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 14px;

    width: 100%;
}


/* ==========================================================
   WALL CARD
   ========================================================== */

.lhuk-wall-card {
    min-width: 0;

    padding: 0 0 16px;

    border: 1px solid var(--lhuk-border);

    border-radius: 28px;

    background: var(--lhuk-surface);

    overflow: hidden;

    transition:
        border-color .2s ease,
        transform .2s ease,
        background-color .2s ease;
}


.lhuk-wall-card:hover {
    border-color: var(--lhuk-purple);

    transform: translateY(-2px);
}


/* ==========================================================
   WALL IMAGE / INNER FRAME
   ========================================================== */

.lhuk-wall-image {
    display: flex;

    align-items: center;
    justify-content: center;

    height: 136px;

    margin: 14px 14px 0;

    padding: 18px;

    border:
        2px dashed
        var(--lhuk-purple);

    border-radius: 22px;

    background: transparent;

    color: var(--lhuk-text-muted);

    text-align: center;

    font-size: 11px;

    line-height: 1.45;
}


.lhuk-wall-image span {
    display: block;
}


/* ==========================================================
   WALL CARD TITLE
   ========================================================== */

.lhuk-wall-card h3 {
    margin:
        11px
        5px
        0;

    padding: 0;

    color: var(--lhuk-text);

    font-size: 13px;

    line-height: 1.35;

    font-weight: 500;

    letter-spacing: 0;
}


/* ==========================================================
   WALL CARD DESCRIPTION
   ========================================================== */

.lhuk-wall-card p {
    margin:
        5px
        5px
        0;

    padding: 0;

    color: var(--lhuk-text-muted);

    font-size: 11px;

    line-height: 1.45;
}


/* ==========================================================
   DARK MODE — WALL
   ========================================================== */

html.dark .lhuk-wall-card,
html.dark-mode .lhuk-wall-card,
html.theme-dark .lhuk-wall-card,
html[data-theme="dark"] .lhuk-wall-card,
html[data-mode="dark"] .lhuk-wall-card,

body.dark .lhuk-wall-card,
body.dark-mode .lhuk-wall-card,
body.theme-dark .lhuk-wall-card,
body[data-theme="dark"] .lhuk-wall-card,
body[data-mode="dark"] .lhuk-wall-card,

.dark .lhuk-wall-card,
.dark-mode .lhuk-wall-card,
.theme-dark .lhuk-wall-card,
[data-theme="dark"] .lhuk-wall-card,
[data-mode="dark"] .lhuk-wall-card {

    background: #222532;

    border-color: #383b49;
}


html.dark .lhuk-wall-image,
html.dark-mode .lhuk-wall-image,
html.theme-dark .lhuk-wall-image,
html[data-theme="dark"] .lhuk-wall-image,
html[data-mode="dark"] .lhuk-wall-image,

body.dark .lhuk-wall-image,
body.dark-mode .lhuk-wall-image,
body.theme-dark .lhuk-wall-image,
body[data-theme="dark"] .lhuk-wall-image,
body[data-mode="dark"] .lhuk-wall-image,

.dark .lhuk-wall-image,
.dark-mode .lhuk-wall-image,
.theme-dark .lhuk-wall-image,
[data-theme="dark"] .lhuk-wall-image,
[data-mode="dark"] .lhuk-wall-image {

    border-color: #8064ed;

    background: transparent;

    color: #85899e;
}


/* ==========================================================
   WALL — TABLET
   ========================================================== */

@media (max-width: 1050px) {

    .lhuk-wall-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 14px;
    }

}


/* ==========================================================
   WALL — MOBILE
   ========================================================== */

@media (max-width: 600px) {

    .lhuk-wall-section {
        padding:
            32px
            0
            40px;
    }

    .lhuk-wall-section .lhuk-section-heading {
        display: block;

        margin-bottom: 18px;
    }

    .lhuk-wall-section .lhuk-section-heading p {
        margin-top: 6px;
    }

    .lhuk-wall-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;
    }

    .lhuk-wall-card {
        border-radius: 22px;
        padding-bottom: 13px;
    }

    .lhuk-wall-image {
        height: 145px;

        margin:
            10px
            10px
            0;

        border-radius: 17px;

        font-size: 10px;
    }

    .lhuk-wall-card h3 {
        margin-top: 9px;

        font-size: 12px;
    }

    .lhuk-wall-card p {
        font-size: 10px;
    }

}


/* ==========================================================
   PARTNER STORIES
   ========================================================== */

.lhuk-stories-title {

    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 40px;

    margin-bottom: 24px;

}


.lhuk-stories-title h2 {

    margin: 0;

    color:
        var(--lhuk-text);

    font-size: 27px;

    line-height: 1.2;

    font-weight: 400;

    letter-spacing: -.025em;

}


.lhuk-stories-title p {

    max-width: 400px;

    margin: 0;

    color:
        var(--lhuk-text-soft);

    font-size: 13px;

    line-height: 1.6;

}


/* ==========================================================
   STORY LAYOUT
   ========================================================== */

.lhuk-story-layout {

    display: grid;

    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(300px, .75fr);

    gap: 24px;

    align-items: start;

}


/* ==========================================================
   FEATURED VIDEO
   ========================================================== */

.lhuk-video-box {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    min-height: 395px;

    padding: 40px;

    border:
        2px dashed
        var(--lhuk-border-strong);

    border-radius: 30px;

    background:
        var(--lhuk-surface-soft);

    text-align: center;

}


.lhuk-video-month {

    position: absolute;

    top: 18px;
    left: 18px;

    padding:
        7px
        12px;

    border-radius: 999px;

    background:
        var(--lhuk-purple-soft);

    color:
        var(--lhuk-purple);

    font-size: 10px;

    font-weight: 600;

}


.lhuk-play {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    margin-bottom: 16px;

    border:
        1px solid
        var(--lhuk-purple);

    border-radius: 50%;

    background:
        var(--lhuk-purple-soft);

    color:
        var(--lhuk-purple);

    font-size: 18px;

}


.lhuk-video-kicker {

    margin-bottom: 10px;

    color:
        var(--lhuk-purple);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .18em;

}


.lhuk-video-box p {

    max-width: 400px;

    margin: 0;

    color:
        var(--lhuk-text-soft);

    font-size: 13px;

    line-height: 1.6;

}


.lhuk-video-duration {

    position: absolute;

    right: 18px;
    bottom: 18px;

    padding:
        6px
        10px;

    border-radius: 999px;

    background:
        var(--lhuk-surface);

    color:
        var(--lhuk-text-muted);

    font-size: 10px;

}


/* ==========================================================
   STORY TEXT
   ========================================================== */

.lhuk-story-meta {

    margin:
        20px
        0
        10px;

    color:
        var(--lhuk-purple);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .14em;

}


.lhuk-story-feature h3 {

    margin:
        0
        0
        13px;

    color:
        var(--lhuk-text);

    font-size: 27px;

    line-height: 1.12;

    font-weight: 400;

    letter-spacing: -.025em;

}


.lhuk-story-feature > p {

    max-width: 650px;

    margin:
        0
        0
        8px;

    color:
        var(--lhuk-text-soft);

    font-size: 13px;

    line-height: 1.65;

}


.lhuk-story-byline {

    color:
        var(--lhuk-text-muted);

    font-size: 11px;

}


/* ==========================================================
   PREVIOUS STORIES
   ========================================================== */

.lhuk-story-list {

    display: flex;

    flex-direction: column;

    gap: 9px;

}


.lhuk-previous {

    display: block;

    margin:
        0
        0
        5px;

    color:
        var(--lhuk-text-muted);

    font-size: 10px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: .18em;

}


.lhuk-story-item {

    display: grid;

    grid-template-columns:
        76px
        minmax(0, 1fr);

    gap: 12px;

    align-items: center;

    padding: 9px;

    border:
        1px solid
        var(--lhuk-border);

    border-radius: 18px;

    background:
        var(--lhuk-surface-soft);

    transition:
        background-color .2s ease,
        border-color .2s ease,
        transform .2s ease;

}


.lhuk-story-item:hover {

    transform: translateY(-1px);

    border-color:
        var(--lhuk-purple-bright);

}


.lhuk-story-item.is-active {

    border-color:
        var(--lhuk-purple);

    background:
        var(--lhuk-surface-purple);

}


.lhuk-story-thumb {

    display: flex;

    align-items: center;
    justify-content: center;

    min-height: 58px;

    border:
        1px dashed
        var(--lhuk-border-strong);

    border-radius: 13px;

    color:
        var(--lhuk-purple);

    font-size: 16px;

}


.lhuk-story-item strong {

    display: block;

    margin-bottom: 4px;

    color:
        var(--lhuk-text);

    font-size: 12px;

    line-height: 1.35;

    font-weight: 600;

}


.lhuk-story-item small {

    display: block;

    color:
        var(--lhuk-text-muted);

    font-size: 10px;

}


.lhuk-tell-story {

    display: block;

    margin-top: 5px;

    color:
        var(--lhuk-purple) !important;

    font-size: 11px;

    font-weight: 600;

}


/* ==========================================================
   FOLLOW US
   ========================================================== */

.lhuk-follow-card {

    padding:
        36px;

    border-radius: 30px;

    background:
        var(--lhuk-surface);

}


.lhuk-follow-card h2 {

    margin:
        0
        0
        10px;

    color:
        var(--lhuk-text);

    font-size: 27px;

    line-height: 1.2;

    font-weight: 400;

    letter-spacing: -.025em;

}


.lhuk-follow-card > p {

    max-width: 700px;

    margin:
        0
        0
        23px;

    color:
        var(--lhuk-text-soft);

    font-size: 13px;

    line-height: 1.65;

}


/* ==========================================================
   SOCIAL LINKS
   ========================================================== */

.lhuk-social-links {

    display: grid;

    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );

    gap: 10px;

}


.lhuk-social-link {

    display: flex;

    flex-direction: column;

    justify-content: center;

    min-height: 65px;

    padding:
        12px
        15px;

    border:
        1px solid
        var(--lhuk-border);

    border-radius: 17px;

    background:
        var(--lhuk-bg);

    transition:
        border-color .2s ease,
        background-color .2s ease;

}


.lhuk-social-link:hover {

    border-color:
        var(--lhuk-purple);

    background:
        var(--lhuk-purple-soft);

}


.lhuk-social-link strong {

    margin-bottom: 4px;

    color:
        var(--lhuk-text);

    font-size: 12px;

    font-weight: 600;

}


.lhuk-social-link span {

    color:
        var(--lhuk-text-muted);

    font-size: 10px;

}


/* ==========================================================
   FOLLOW ACTIONS
   ========================================================== */

.lhuk-follow-actions {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 16px;

    margin-top: 22px;

    color:
        var(--lhuk-text-muted);

    font-size: 11px;

}


.lhuk-outline-button {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 42px;

    padding:
        0
        19px;

    border:
        1px solid
        var(--lhuk-purple);

    border-radius: 999px;

    background: transparent;

    color:
        var(--lhuk-purple) !important;

    font-size: 12px;

    font-weight: 600;

}


.lhuk-outline-button:hover {

    background:
        var(--lhuk-purple);

    color:
        #ffffff !important;

}


/* ==========================================================
   CHARITY
   ========================================================== */

.lhuk-charity-card {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(300px, .75fr);

    gap: 40px;

    align-items: center;

    padding:
        38px;

    border-radius: 30px;

    background:
        var(--lhuk-surface-purple);

}


.lhuk-charity-content h2 {

    margin:
        14px
        0
        12px;

    color:
        var(--lhuk-text);

    font-size: 32px;

    line-height: 1.1;

    font-weight: 400;

    letter-spacing: -.03em;

}


.lhuk-charity-content > p {

    max-width: 650px;

    margin:
        0
        0
        25px;

    color:
        var(--lhuk-text-soft);

    font-size: 13px;

    line-height: 1.65;

}


/* ==========================================================
   CHARITY STATS
   ========================================================== */

.lhuk-charity-stats {

    display: flex;

    flex-wrap: wrap;

    gap: 36px;

}


.lhuk-charity-stats > div {

    min-width: 100px;

}


.lhuk-charity-stats strong {

    display: block;

    margin-bottom: 5px;

    color:
        var(--lhuk-text);

    font-size: 25px;

    line-height: 1;

    font-weight: 500;

}


.lhuk-charity-stats span {

    display: block;

    color:
        var(--lhuk-text-muted);

    font-size: 10px;

    line-height: 1.45;

}


/* ==========================================================
   CHARITY ART
   ========================================================== */

.lhuk-charity-art {

    display: flex;

    align-items: center;
    justify-content: center;

    min-height: 190px;

    padding: 30px;

    border:
        2px dashed
        var(--lhuk-border-strong);

    border-radius: 23px;

    color:
        var(--lhuk-text-muted);

    text-align: center;

    font-size: 12px;

    line-height: 1.55;

}


/* ==========================================================
   CAMERA ROLL
   ========================================================== */

.lhuk-camera-section {

    padding:
        52px
        0
        68px;

    border-top:
        1px solid
        var(--lhuk-border);

}


.lhuk-camera-heading {

    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 40px;

}


.lhuk-camera-heading h2 {

    margin:
        13px
        0
        8px;

    color:
        var(--lhuk-text);

    font-size: 25px;

    line-height: 1.2;

    font-weight: 400;

}


.lhuk-camera-heading p {

    max-width: 610px;

    margin: 0;

    color:
        var(--lhuk-text-soft);

    font-size: 13px;

    line-height: 1.65;

}


.lhuk-camera-note {

    padding-top: 2px;

    color:
        var(--lhuk-text-muted);

    font-size: 11px;

    white-space: nowrap;

}


/* ==========================================================
   CAMERA TRACK
   ========================================================== */

.lhuk-camera-track {

    display: grid;

    grid-template-columns:
        .82fr
        1.22fr
        .9fr
        1.28fr
        .82fr
        .95fr;

    gap: 13px;

    margin-top: 21px;

}


.lhuk-camera-card {

    min-width: 0;

}


.lhuk-camera-image {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;

    padding: 20px;

    border:
        2px dashed
        var(--lhuk-border-strong);

    border-radius: 23px;

    background:
        var(--lhuk-surface-soft);

    color:
        var(--lhuk-text-muted);

    text-align: center;

    font-size: 11px;

    line-height: 1.5;

}


.lhuk-camera-card.portrait .lhuk-camera-image {

    min-height: 264px;

}


.lhuk-camera-card.landscape .lhuk-camera-image,
.lhuk-camera-card.square .lhuk-camera-image {

    min-height: 207px;

}


.lhuk-camera-card h3 {

    margin:
        7px
        5px
        0;

    color:
        var(--lhuk-text-soft);

    font-size: 11px;

    line-height: 1.55;

    font-weight: 500;

}


.lhuk-camera-card p {

    margin:
        3px
        5px
        0;

    color:
        var(--lhuk-text-muted);

    font-size: 10px;

    line-height: 1.45;

}


/* ==========================================================
   DARK MODE
   Match Pricing / Hosting exactly
   ========================================================== */

html.dark .lhuk-community-page,
html.dark-mode .lhuk-community-page,
html.theme-dark .lhuk-community-page,

html[data-theme="dark"] .lhuk-community-page,
html[data-mode="dark"] .lhuk-community-page,

body.dark .lhuk-community-page,
body.dark-mode .lhuk-community-page,
body.theme-dark .lhuk-community-page,

body[data-theme="dark"] .lhuk-community-page,
body[data-mode="dark"] .lhuk-community-page,

.dark .lhuk-community-page,
.dark-mode .lhuk-community-page,
.theme-dark .lhuk-community-page,

[data-theme="dark"] .lhuk-community-page,
[data-mode="dark"] .lhuk-community-page {

    --lhuk-bg: #141522;

    --lhuk-surface: #202330;
    --lhuk-surface-soft: #222532;
    --lhuk-surface-purple: #29283d;

    --lhuk-text: #f3f2fa;
    --lhuk-heading: #f0eff7;

    --lhuk-text-soft: #989caf;
    --lhuk-text-muted: #85899e;
    --lhuk-muted: #9295ad;

    --lhuk-border: #383b49;
    --lhuk-border-strong: #414452;

    --lhuk-purple: #9a7cff;
    --lhuk-purple-bright: #a78cff;

    --lhuk-purple-soft:
        rgba(154, 124, 255, .16);

    background:
        #141522 !important;

    color:
        #f3f2fa;

}


/* ==========================================================
   DARK MODE — MAIN BODY
   ========================================================== */

html.dark:has(.lhuk-community-page) #main-body,
html.dark-mode:has(.lhuk-community-page) #main-body,
html.theme-dark:has(.lhuk-community-page) #main-body,

html[data-theme="dark"]:has(.lhuk-community-page) #main-body,
html[data-mode="dark"]:has(.lhuk-community-page) #main-body,

body.dark:has(.lhuk-community-page) #main-body,
body.dark-mode:has(.lhuk-community-page) #main-body,
body.theme-dark:has(.lhuk-community-page) #main-body,

body[data-theme="dark"]:has(.lhuk-community-page) #main-body,
body[data-mode="dark"]:has(.lhuk-community-page) #main-body {

    background:
        #141522 !important;

}


/* ==========================================================
   DARK MODE — HERO / SECTIONS
   ========================================================== */

html.dark .lhuk-community-hero,
html.dark .lhuk-community-section,

html.dark-mode .lhuk-community-hero,
html.dark-mode .lhuk-community-section,

html.theme-dark .lhuk-community-hero,
html.theme-dark .lhuk-community-section,

html[data-theme="dark"] .lhuk-community-hero,
html[data-theme="dark"] .lhuk-community-section,

html[data-mode="dark"] .lhuk-community-hero,
html[data-mode="dark"] .lhuk-community-section,

body.dark .lhuk-community-hero,
body.dark .lhuk-community-section,

body.dark-mode .lhuk-community-hero,
body.dark-mode .lhuk-community-section,

body.theme-dark .lhuk-community-hero,
body.theme-dark .lhuk-community-section,

body[data-theme="dark"] .lhuk-community-hero,
body[data-theme="dark"] .lhuk-community-section,

body[data-mode="dark"] .lhuk-community-hero,
body[data-mode="dark"] .lhuk-community-section {

    background:
        #141522 !important;

}


/* ==========================================================
   DARK MODE — TEXT
   ========================================================== */

html.dark .lhuk-community-page h1,
html.dark .lhuk-community-page h2,
html.dark .lhuk-community-page h3,

html.dark-mode .lhuk-community-page h1,
html.dark-mode .lhuk-community-page h2,
html.dark-mode .lhuk-community-page h3,

html.theme-dark .lhuk-community-page h1,
html.theme-dark .lhuk-community-page h2,
html.theme-dark .lhuk-community-page h3,

html[data-theme="dark"] .lhuk-community-page h1,
html[data-theme="dark"] .lhuk-community-page h2,
html[data-theme="dark"] .lhuk-community-page h3,

body.dark .lhuk-community-page h1,
body.dark .lhuk-community-page h2,
body.dark .lhuk-community-page h3,

body.dark-mode .lhuk-community-page h1,
body.dark-mode .lhuk-community-page h2,
body.dark-mode .lhuk-community-page h3,

body.theme-dark .lhuk-community-page h1,
body.theme-dark .lhuk-community-page h2,
body.theme-dark .lhuk-community-page h3 {

    color:
        #f0eff7 !important;

}


/* ==========================================================
   DARK MODE — SURFACES
   ========================================================== */

html.dark .lhuk-wall-image,
html.dark .lhuk-story-item,
html.dark .lhuk-follow-card,
html.dark .lhuk-camera-image,
html.dark .lhuk-video-box,

html.dark-mode .lhuk-wall-image,
html.dark-mode .lhuk-story-item,
html.dark-mode .lhuk-follow-card,
html.dark-mode .lhuk-camera-image,
html.dark-mode .lhuk-video-box,

html.theme-dark .lhuk-wall-image,
html.theme-dark .lhuk-story-item,
html.theme-dark .lhuk-follow-card,
html.theme-dark .lhuk-camera-image,
html.theme-dark .lhuk-video-box,

html[data-theme="dark"] .lhuk-wall-image,
html[data-theme="dark"] .lhuk-story-item,
html[data-theme="dark"] .lhuk-follow-card,
html[data-theme="dark"] .lhuk-camera-image,
html[data-theme="dark"] .lhuk-video-box,

body.dark .lhuk-wall-image,
body.dark .lhuk-story-item,
body.dark .lhuk-follow-card,
body.dark .lhuk-camera-image,
body.dark .lhuk-video-box,

body.dark-mode .lhuk-wall-image,
body.dark-mode .lhuk-story-item,
body.dark-mode .lhuk-follow-card,
body.dark-mode .lhuk-camera-image,
body.dark-mode .lhuk-video-box,

body.theme-dark .lhuk-wall-image,
body.theme-dark .lhuk-story-item,
body.theme-dark .lhuk-follow-card,
body.theme-dark .lhuk-camera-image,
body.theme-dark .lhuk-video-box {

    background:
        #222532 !important;

    border-color:
        rgba(145, 115, 255, .50);

}


/* ==========================================================
   DARK MODE — FOLLOW CARD
   ========================================================== */

html.dark .lhuk-social-link,
html.dark-mode .lhuk-social-link,
html.theme-dark .lhuk-social-link,
html[data-theme="dark"] .lhuk-social-link,
html[data-mode="dark"] .lhuk-social-link,

body.dark .lhuk-social-link,
body.dark-mode .lhuk-social-link,
body.theme-dark .lhuk-social-link,
body[data-theme="dark"] .lhuk-social-link,
body[data-mode="dark"] .lhuk-social-link {

    background:
        #141522;

    border-color:
        #383b49;

}


/* ==========================================================
   DARK MODE — CHARITY
   ========================================================== */

html.dark .lhuk-charity-card,
html.dark-mode .lhuk-charity-card,
html.theme-dark .lhuk-charity-card,
html[data-theme="dark"] .lhuk-charity-card,
html[data-mode="dark"] .lhuk-charity-card,

body.dark .lhuk-charity-card,
body.dark-mode .lhuk-charity-card,
body.theme-dark .lhuk-charity-card,
body[data-theme="dark"] .lhuk-charity-card,
body[data-mode="dark"] .lhuk-charity-card {

    background:
        #29283d !important;

}


/* ==========================================================
   DARK MODE — STORY ACTIVE
   ========================================================== */

html.dark .lhuk-story-item.is-active,
html.dark-mode .lhuk-story-item.is-active,
html.theme-dark .lhuk-story-item.is-active,
html[data-theme="dark"] .lhuk-story-item.is-active,
html[data-mode="dark"] .lhuk-story-item.is-active,

body.dark .lhuk-story-item.is-active,
body.dark-mode .lhuk-story-item.is-active,
body.theme-dark .lhuk-story-item.is-active,
body[data-theme="dark"] .lhuk-story-item.is-active,
body[data-mode="dark"] .lhuk-story-item.is-active {

    background:
        #29283d !important;

    border-color:
        #9a7cff !important;

}


/* ==========================================================
   DARK MODE — CAMERA DIVIDER
   ========================================================== */

html.dark .lhuk-camera-section,
html.dark-mode .lhuk-camera-section,
html.theme-dark .lhuk-camera-section,
html[data-theme="dark"] .lhuk-camera-section,
html[data-mode="dark"] .lhuk-camera-section,

body.dark .lhuk-camera-section,
body.dark-mode .lhuk-camera-section,
body.theme-dark .lhuk-camera-section,
body[data-theme="dark"] .lhuk-camera-section,
body[data-mode="dark"] .lhuk-camera-section {

    border-top-color:
        rgba(177, 177, 208, .20);

}


/* ==========================================================
   RESPONSIVE — 1050px
   ========================================================== */

@media (max-width: 1050px) {

    .lhuk-community-container {

        width:
            min(
                calc(100% - 40px),
                900px
            );

    }


    .lhuk-wall-grid {

        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

    }


    .lhuk-story-layout {

        grid-template-columns:
            1fr;

    }


    .lhuk-social-links {

        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

    }


    .lhuk-charity-card {

        grid-template-columns:
            1fr;

    }


    .lhuk-camera-track {

        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

    }

}


/* ==========================================================
   RESPONSIVE — 800px
   ========================================================== */

@media (max-width: 800px) {

    .lhuk-community-container {

        width:
            min(
                calc(100% - 40px),
                760px
            );

    }


    .lhuk-community-hero {

        padding:
            52px
            0
            38px;

    }


    .lhuk-community-hero h1 {

        font-size:
            46px;

    }


    .lhuk-stories-title {

        display: block;

    }


    .lhuk-stories-title p {

        margin-top: 12px;

    }


    .lhuk-camera-heading {

        display: block;

    }


    .lhuk-camera-note {

        display: block;

        margin-top: 15px;

    }


    .lhuk-camera-track {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

    }

}


/* ==========================================================
   RESPONSIVE — 600px
   ========================================================== */

@media (max-width: 600px) {

    .lhuk-community-container {

        width:
            calc(100% - 28px);

    }


    .lhuk-community-hero {

        padding:
            42px
            0
            32px;

    }


    .lhuk-community-hero h1 {

        font-size:
            40px;

    }


    .lhuk-community-lead {

        font-size:
            14px;

    }


    .lhuk-community-section {

        padding:
            30px
            0;

    }


    .lhuk-wall-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 10px;

    }


    .lhuk-wall-image {

        min-height:
            170px;

    }


    .lhuk-follow-card {

        padding:
            27px
            20px;

        border-radius:
            25px;

    }


    .lhuk-social-links {

        grid-template-columns:
            1fr
            1fr;

    }


    .lhuk-charity-card {

        padding:
            28px
            22px;

        border-radius:
            25px;

    }


    .lhuk-charity-stats {

        gap:
            22px;

    }


    .lhuk-camera-track {

        grid-template-columns:
            1fr;

    }


    .lhuk-camera-card.portrait .lhuk-camera-image,
    .lhuk-camera-card.landscape .lhuk-camera-image,
    .lhuk-camera-card.square .lhuk-camera-image {

        min-height:
            190px;

    }


    .lhuk-video-box {

        min-height:
            300px;

        padding:
            25px;

        border-radius:
            25px;

    }


    .lhuk-story-feature h3 {

        font-size:
            25px;

    }


    .lhuk-story-item {

        grid-template-columns:
            70px
            minmax(0, 1fr);

    }

}


/* ==========================================================
   DESKTOP BREAK
   ========================================================== */

@media (min-width: 601px) {

    .desktop-only {

        display:
            inline;

    }

}


@media (max-width: 600px) {

    .desktop-only {

        display:
            none;

    }

}


/* ==========================================================
   REDUCE MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .lhuk-community-page *,
    .lhuk-community-page *::before,
    .lhuk-community-page *::after {

        transition:
            none !important;

    }

}

/* ==========================================================
   KITWICK COMMUNITY — WEBSITE WALL OVERRIDE
   Add this at the VERY BOTTOM of community.css
   ========================================================== */


/* ----------------------------------------------------------
   WALL GRID
   ---------------------------------------------------------- */

.lhuk-wall-section .lhuk-wall-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
}


/* ----------------------------------------------------------
   WALL CARD
   ---------------------------------------------------------- */

.lhuk-wall-section .lhuk-wall-card {
    display: block;
    min-width: 0;
    padding: 0 0 16px;
    border: 1px solid var(--lhuk-border);
    border-radius: 28px;
    background: var(--lhuk-surface);
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition:
        border-color .2s ease,
        transform .2s ease,
        background-color .2s ease;
}

.lhuk-wall-section .lhuk-wall-card:hover {
    border-color: var(--lhuk-purple);
    transform: translateY(-2px);
}


/* ----------------------------------------------------------
   WEBSITE IMAGE
   ---------------------------------------------------------- */

.lhuk-wall-section .lhuk-wall-image {
    position: relative;
    display: block;

    width: calc(100% - 28px);
    height: auto;
    aspect-ratio: 16 / 10;

    margin: 14px 14px 0;
    padding: 0;

    overflow: hidden;

    border: 0;
    border-radius: 22px;

    background: var(--lhuk-surface-soft);
}


/* Actual website screenshot */

.lhuk-wall-section .lhuk-wall-image img {
    display: block;

    width: 100%;
    height: 100%;

    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    object-fit: cover;
    object-position: top center;

    transition: transform .35s ease;
}


/* Subtle hover zoom */

.lhuk-wall-section .lhuk-wall-card:hover
.lhuk-wall-image img {
    transform: scale(1.025);
}


/* ----------------------------------------------------------
   WALL CONTENT
   ---------------------------------------------------------- */

.lhuk-wall-section .lhuk-wall-content {
    padding: 0 5px;
}


/* Website name */

.lhuk-wall-section .lhuk-wall-card h3 {
    margin: 11px 5px 0;
    padding: 0;

    color: var(--lhuk-text);

    font-size: 13px;
    line-height: 1.35;
    font-weight: 500;
    letter-spacing: 0;
}


/* Website description */

.lhuk-wall-section .lhuk-wall-card p {
    margin: 5px 5px 0;
    padding: 0;

    color: var(--lhuk-text-muted);

    font-size: 11px;
    line-height: 1.45;
}


/* ----------------------------------------------------------
   VIEW WEBSITE LINK
   ---------------------------------------------------------- */

.lhuk-wall-section .lhuk-wall-link {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    margin: 9px 5px 0;

    color: var(--lhuk-purple);

    font-size: 11px;
    line-height: 1.3;
    font-weight: 600;
}

.lhuk-wall-section .lhuk-wall-link span {
    font-size: 14px;
    line-height: 1;

    transition: transform .2s ease;
}

.lhuk-wall-section .lhuk-wall-card:hover
.lhuk-wall-link span {
    transform: translateX(3px);
}


/* ----------------------------------------------------------
   HIDE OLD PLACEHOLDER TEXT
   ---------------------------------------------------------- */

.lhuk-wall-section .lhuk-wall-image > span {
    display: none !important;
}


/* ----------------------------------------------------------
   DARK MODE
   ---------------------------------------------------------- */

html.dark .lhuk-wall-section .lhuk-wall-card,
html.dark-mode .lhuk-wall-section .lhuk-wall-card,
html.theme-dark .lhuk-wall-section .lhuk-wall-card,
html[data-theme="dark"] .lhuk-wall-section .lhuk-wall-card,
html[data-mode="dark"] .lhuk-wall-section .lhuk-wall-card,

body.dark .lhuk-wall-section .lhuk-wall-card,
body.dark-mode .lhuk-wall-section .lhuk-wall-card,
body.theme-dark .lhuk-wall-section .lhuk-wall-card,
body[data-theme="dark"] .lhuk-wall-section .lhuk-wall-card,
body[data-mode="dark"] .lhuk-wall-section .lhuk-wall-card {

    background: #222532;
    border-color: #383b49;
}


html.dark .lhuk-wall-section .lhuk-wall-image,
html.dark-mode .lhuk-wall-section .lhuk-wall-image,
html.theme-dark .lhuk-wall-section .lhuk-wall-image,
html[data-theme="dark"] .lhuk-wall-section .lhuk-wall-image,
html[data-mode="dark"] .lhuk-wall-section .lhuk-wall-image,

body.dark .lhuk-wall-section .lhuk-wall-image,
body.dark-mode .lhuk-wall-section .lhuk-wall-image,
body.theme-dark .lhuk-wall-section .lhuk-wall-image,
body[data-theme="dark"] .lhuk-wall-section .lhuk-wall-image,
body[data-mode="dark"] .lhuk-wall-section .lhuk-wall-image {

    border: 0 !important;
    background: var(--lhuk-surface-soft);
}


/* ----------------------------------------------------------
   TABLET
   ---------------------------------------------------------- */

@media (max-width: 1050px) {

    .lhuk-wall-section .lhuk-wall-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 600px) {

    .lhuk-wall-section .lhuk-wall-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .lhuk-wall-section .lhuk-wall-card {
        border-radius: 22px;
        padding-bottom: 13px;
    }

    .lhuk-wall-section .lhuk-wall-image {
        width: calc(100% - 20px);
        height: auto;
        aspect-ratio: 16 / 10;

        margin: 10px 10px 0;

        border-radius: 17px;
    }

    .lhuk-wall-section .lhuk-wall-card h3 {
        margin-top: 9px;
        font-size: 12px;
    }

    .lhuk-wall-section .lhuk-wall-card p {
        font-size: 10px;
    }

    .lhuk-wall-section .lhuk-wall-link {
        font-size: 10px;
    }

}

/* ==========================================================
   KITWICK WALL — IMAGE + CONTENT SPACING
   ========================================================== */

.lhuk-wall-card .lhuk-wall-image {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 28px 28px 0 0 !important;
    background: #f3f3f8 !important;
}

.lhuk-wall-card .lhuk-wall-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: none !important;
}

/* Content spacing */
.lhuk-wall-card .lhuk-wall-content {
    padding: 18px 20px 22px !important;
}

.lhuk-wall-card .lhuk-wall-content h3 {
    margin-top: 0 !important;
    margin-bottom: 6px !important;
}

.lhuk-wall-card .lhuk-wall-content p {
    margin-bottom: 8px !important;
}

.lhuk-wall-card .lhuk-wall-content .lhuk-wall-link {
    display: inline-block;
    margin-top: 2px !important;
}

.lhuk-wall-card:hover .lhuk-wall-image img {
    transform: none !important;
}

/* ==========================================================
   KITWICK WALL — 3 COLUMN GRID + COMPACT CARD
   ========================================================== */

.lhuk-wall-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* Reduce empty space below the website link */
.lhuk-wall-card {
    padding-bottom: 8px !important;
}

.lhuk-wall-card .lhuk-wall-content {
    padding: 18px 20px 10px !important;
}

/* Responsive */
@media (max-width: 1050px) {
    .lhuk-wall-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 600px) {
    .lhuk-wall-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Wall — View website link */
.lhuk-wall-card .lhuk-wall-link {
    color: var(--lhuk-purple) !important;
    font-weight: 600 !important;
    text-align: left !important;
    display: block !important;
    margin-left: 5px !important;
}

/* ==========================================================
   WALL — LIVELY VIEW WEBSITE LINK
   ========================================================== */

.lhuk-wall-card .lhuk-wall-link {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    color: var(--lhuk-purple) !important;
    font-weight: 600 !important;
    text-align: left !important;
    margin-left: 5px !important;
    text-decoration: none !important;
    transition:
        transform 0.25s ease,
        color 0.25s ease;
}

/* Arrow */
.lhuk-wall-card .lhuk-wall-link > span {
    display: inline-block;
    transition:
        transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Animated underline */
.lhuk-wall-card .lhuk-wall-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: width 0.3s ease;
}

/* ONLY when View website itself is hovered */
.lhuk-wall-card .lhuk-wall-link:hover {
    transform: translateX(2px);
}

.lhuk-wall-card .lhuk-wall-link:hover > span {
    transform: translateX(7px);
}

.lhuk-wall-card .lhuk-wall-link:hover::after {
    width: calc(100% - 2px);
}

/* ==========================================================
   KITWICK — THE JOURNEY
   ========================================================== */

.lhuk-journey-section {
    width: 100%;
    padding: 0 0 80px;
    font-family: "Poppins", sans-serif;
}

.lhuk-journey-section .lhuk-home-container {
    width: min(calc(100% - 48px), var(--lhuk-container));
    margin: 0 auto;
}

/* Heading */

.lhuk-journey-heading {
    display: flex;
    align-items: baseline;
    gap: 18px;
    margin-bottom: 22px;
}

.lhuk-journey-heading h2 {
    margin: 0;
    color: var(--lhuk-text);
    font-size: 30px;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: -0.8px;
}

.lhuk-journey-heading p {
    margin: 0;
    color: var(--lhuk-text-secondary);
    font-size: 15px;
    line-height: 1.5;
    font-weight: 400;
}

/* Cards */

.lhuk-journey-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
}

.lhuk-journey-card {
    min-width: 0;
    min-height: 202px;
    padding: 24px 22px 22px;
    border: 1px solid var(--lhuk-border);
    border-radius: 28px;
    background: var(--lhuk-card-soft);
    box-sizing: border-box;
}

.lhuk-journey-eyebrow {
    display: block;
    margin-bottom: 9px;
    color: var(--lhuk-purple);
    font-size: 11px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 1.8px;
}

.lhuk-journey-card h3 {
    margin: 0 0 10px;
    color: var(--lhuk-text);
    font-size: 19px;
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: -0.2px;
}

.lhuk-journey-card p {
    margin: 0 0 17px;
    color: var(--lhuk-text-secondary);
    font-size: 14px;
    line-height: 1.55;
    font-weight: 400;
}

.lhuk-journey-note {
    display: block;
    color: var(--lhuk-purple);
    font-size: 13px;
    line-height: 1.45;
    font-weight: 500;
}

/* Dark mode */

body.dark .lhuk-journey-card,
body.dark-mode .lhuk-journey-card,
body.theme-dark .lhuk-journey-card,
body[data-theme="dark"] .lhuk-journey-card,
html[data-theme="dark"] .lhuk-journey-card {
    background: rgba(255, 255, 255, 0.075);
    border-color: rgba(255, 255, 255, 0.06);
}

/* Tablet */

@media (max-width: 1050px) {

    .lhuk-journey-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

/* Mobile */

@media (max-width: 600px) {

    .lhuk-journey-section {
        padding-bottom: 60px;
    }

    .lhuk-journey-section .lhuk-home-container {
        width: calc(100% - 32px);
    }

    .lhuk-journey-heading {
        display: block;
        margin-bottom: 20px;
    }

    .lhuk-journey-heading h2 {
        margin-bottom: 6px;
        font-size: 27px;
    }

    .lhuk-journey-heading p {
        font-size: 14px;
    }

    .lhuk-journey-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .lhuk-journey-card {
        min-height: 0;
        padding: 22px 20px;
        border-radius: 22px;
    }

}

/* ==========================================================
   KITWICK — JOURNEY ALIGNMENT
   Match the Wall / Community container exactly
   ========================================================== */

.lhuk-journey-section > .lhuk-community-container,
.lhuk-journey-section > .lhuk-home-container,
.lhuk-journey-section .lhuk-community-container,
.lhuk-journey-section .lhuk-home-container {
    width: min(1160px, calc(100% - 48px)) !important;
    max-width: 1160px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.lhuk-journey-section .lhuk-journey-grid {
    width: 100% !important;
    max-width: 100% !important;
}

/* Temporarily hide Partner Stories */
.lhuk-stories-section {
    display: none !important;
}

/* Temporarily hide Build by us */
.lhuk-wall-section {
    display: none !important;
}

/* ==========================================================
   CHARITY IMAGE — MATCH HOMEPAGE WINGMEN IMAGE
   ========================================================== */

.lhuk-charity-art {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 0;
    padding: 0;

    border: 0;
    border-radius: 0;

    background: transparent;

    color: inherit;
    text-align: center;
    font-size: inherit;
    line-height: inherit;
}


/* Wingmen image */

.lhuk-charity-art .lhuk-charity-image {
    display: block;

    width: 100%;
    max-width: 430px;
    height: auto;

    margin: 0;
    padding: 0;

    object-fit: contain;
}


/* ==========================================================
   CHARITY IMAGE — TABLET
   ========================================================== */

@media (max-width: 1050px) {

    .lhuk-charity-art .lhuk-charity-image {
        max-width: 400px;
    }

}


/* ==========================================================
   CHARITY IMAGE — MOBILE
   ========================================================== */

@media (max-width: 800px) {

    .lhuk-charity-art {
        margin-top: 10px;
    }

    .lhuk-charity-art .lhuk-charity-image {
        width: 100%;
        max-width: 380px;
    }

}


@media (max-width: 600px) {

    .lhuk-charity-art {
        margin-top: 5px;
    }

    .lhuk-charity-art .lhuk-charity-image {
        width: 100%;
        max-width: 340px;
    }

}