/* =========================================================
   LM IMPIANTI — HOME SOLUTIONS
   Editorial / Minimal / Interactive
   ========================================================= */


/* =========================================================
   01 — SECTION
   ========================================================= */

.lm-solutions {
    --lm-solutions-width: 1440px;
    --lm-solutions-side: 3em;

    --lm-solutions-ink: #19191a;
    --lm-solutions-muted: #5e615d;
    --lm-solutions-soft: #a2a8a1;
    --lm-solutions-line: #e3e7e2;
    --lm-solutions-accent: #6100fe;

    --lm-solutions-body:
        "Instrument Sans",
        sans-serif;

    --lm-solutions-mono:
        "IBM Plex Mono",
        monospace;

    --lm-solutions-ease:
        cubic-bezier(.22, 1, .36, 1);

    position: relative;
    z-index: 4;

    width: 100%;
    margin: 0;

    padding:
        120px
        var(--lm-solutions-side)
        130px;

    background: #ffffff;
    color: var(--lm-solutions-ink);
}

.lm-solutions,
.lm-solutions * {
    box-sizing: border-box;
}


/* =========================================================
   02 — CONTAINER
   ========================================================= */

.lm-solutions__container {
    display: grid;

    grid-template-columns:
        minmax(0, .9fr)
        minmax(0, 1.1fr);

    align-items: stretch;

    column-gap: clamp(60px, 7vw, 120px);

    width: 100%;
    max-width: var(--lm-solutions-width);

    margin-inline: auto;
}


/* =========================================================
   03 — COLONNA SINISTRA
   ========================================================= */

.lm-solutions__intro {
    position: relative;
    align-self: stretch;

    min-width: 0;
}

.lm-solutions__intro-inner {
    position: sticky;
    top: 145px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    width: 100%;
}


/* =========================================================
   04 — EYEBROW
   ========================================================= */

.lm-solutions__eyebrow {
    display: flex;
    align-items: center;

    gap: 10px;

    margin: 0 0 23px;

    font-family: var(--lm-solutions-mono);
    font-size: 10px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: .1em;

    text-transform: uppercase;

    color: var(--lm-solutions-muted);
}

.lm-solutions__eyebrow-mark {
    display: inline-block;

    flex: 0 0 5px;

    width: 5px;
    height: 5px;

    background: var(--lm-solutions-accent);
}


/* =========================================================
   05 — TITOLO
   ========================================================= */

.lm-solutions__heading-wrap {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    width: 100%;
    margin-bottom: 27px;
}

.lm-solutions__heading {
    margin: 0;

    font-family: var(--lm-solutions-body);

    font-size: clamp(
        44px,
        4.6vw,
        74px
    );

    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -.068em;

    color: var(--lm-solutions-ink);
}

.lm-solutions__count {
    position: relative;

    flex: 0 0 auto;

    margin-top: 6px;

    font-family: var(--lm-solutions-mono);
    font-size: 14px;
    font-weight: 400;
    line-height: 1;

    letter-spacing: -.04em;

    color: var(--lm-solutions-ink);
}


/* =========================================================
   06 — DESCRIZIONE
   ========================================================= */

.lm-solutions__description {
    max-width: 435px;

    margin: 0 0 34px;

    font-family: var(--lm-solutions-body);

    font-size: clamp(
        15px,
        1.15vw,
        17px
    );

    font-weight: 400;
    line-height: 1.65;
    letter-spacing: -.017em;

    color: var(--lm-solutions-muted);

    text-wrap: pretty;
}


/* =========================================================
   07 — LINK TUTTI I SERVIZI
   ========================================================= */

.lm-solutions__all-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 24px;

    width: fit-content;
    min-height: 49px;

    padding:
        15px
        20px;

    border-radius: 3px;
    border: 1px solid var(--lm-solutions-accent);

    background: var(--lm-solutions-accent);

    font-family: var(--lm-solutions-mono);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: .025em;

    text-decoration: none;
    text-transform: uppercase;

    color: #ffffff;

    transition:
        background .3s ease,
        border-color .3s ease,
        transform .4s var(--lm-solutions-ease);
}

.lm-solutions__all-link:hover {
    background: #5011d0;
    border-color: #5011d0;
    color: #ffffff;

    transform: translateY(-2px);
}

.lm-solutions__all-arrow {
    display: inline-block;

    font-family: var(--lm-solutions-body);
    font-size: 17px;
    font-weight: 400;
    line-height: 1;

    transition:
        transform .4s var(--lm-solutions-ease);
}

.lm-solutions__all-link:hover
.lm-solutions__all-arrow {
    transform: translate(2px, -2px);
}


/* =========================================================
   08 — COLONNA DESTRA
   ========================================================= */

.lm-solutions__list-wrap {
    position: relative;

    min-width: 0;

    isolation: isolate;
}

.lm-solutions__list {
    position: relative;
    z-index: 1;

    width: 100%;
}


/* =========================================================
   09 — RIGHE DEI SERVIZI
   ========================================================= */

.lm-solutions__item {
    position: relative;

    display: grid;

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

    align-items: center;

    column-gap: 15px;

    width: 100%;
    min-height: 88px;

    padding: 20px 0;

    border-bottom:
        1px solid var(--lm-solutions-line);

    background: transparent;

    color: var(--lm-solutions-ink);

    text-decoration: none;

    cursor: pointer;

    transition:
        color .3s ease,
        border-color .3s ease;
}

.lm-solutions__item:first-child {
    border-top:
        1px solid var(--lm-solutions-line);
}


/* =========================================================
   10 — NUMERI
   ========================================================= */

.lm-solutions__item-number {
    display: block;

    font-family: var(--lm-solutions-mono);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;

    color: #858c86;

    transition: color .3s ease;
}


/* =========================================================
   11 — NOMI DEI SERVIZI
   ========================================================= */

.lm-solutions__item-name {
    display: block;

    min-width: 0;

    font-family: var(--lm-solutions-mono);

    font-size: clamp(
        17px,
        1.65vw,
        23px
    );

    font-weight: 400;
    line-height: 1.22;
    letter-spacing: -.045em;

    text-transform: uppercase;

    color: inherit;

    transition:
        color .3s ease,
        transform .45s var(--lm-solutions-ease);
}


/* =========================================================
   12 — FRECCIA
   ========================================================= */

.lm-solutions__item-arrow {
    display: inline-block;

    justify-self: end;

    font-family: var(--lm-solutions-body);
    font-size: 18px;
    font-weight: 400;
    line-height: 1;

    color: #999f9a;

    transition:
        color .3s ease,
        transform .4s var(--lm-solutions-ease);
}


/* =========================================================
   13 — HOVER / ACTIVE
   ========================================================= */

.lm-solutions__item:hover,
.lm-solutions__item.is-active,
.lm-solutions__item:focus-visible {
    color: var(--lm-solutions-accent);

    border-color: var(--lm-solutions-accent);
}

.lm-solutions__item:hover
.lm-solutions__item-number,

.lm-solutions__item.is-active
.lm-solutions__item-number,

.lm-solutions__item:focus-visible
.lm-solutions__item-number {
    color: var(--lm-solutions-accent);
}

.lm-solutions__item:hover
.lm-solutions__item-arrow,

.lm-solutions__item.is-active
.lm-solutions__item-arrow,

.lm-solutions__item:focus-visible
.lm-solutions__item-arrow {
    color: var(--lm-solutions-accent);

    transform: translate(2px, -2px);
}


/* =========================================================
   14 — COMPARSA PROGRESSIVA ALLO SCROLL
   ========================================================= */

/*
 * Senza JavaScript le righe rimangono
 * normalmente visibili.
 */

.lm-solutions__item {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/*
 * JavaScript aggiunge is-ready
 * quando inizializza IntersectionObserver.
 */

.lm-solutions.is-ready
.lm-solutions__item:not(.is-visible) {
    opacity: 0;

    transform:
        translate3d(0, -34px, 0);

    pointer-events: none;
}

/*
 * Ogni voce compare dall'alto,
 * con una dissolvenza morbida.
 */

.lm-solutions.is-ready
.lm-solutions__item.is-visible {
    opacity: 1;

    transform:
        translate3d(0, 0, 0);

    transition:
        opacity .8s var(--lm-solutions-ease),
        transform .9s var(--lm-solutions-ease),
        color .3s ease,
        border-color .3s ease;
}


/* =========================================================
   15 — FOTOGRAFIA ALL'HOVER
   ========================================================= */

.lm-solutions__preview {
    --preview-x: 50%;
    --preview-y: 50%;

    position: absolute;

    left: var(--preview-x);
    top: var(--preview-y);

    z-index: 5;

    width: clamp(
        190px,
        17vw,
        275px
    );

    aspect-ratio: 4 / 5;

    pointer-events: none;

    opacity: 0;
    visibility: hidden;

    transform:
        translate3d(-50%, -44%, 0)
        scale(.95);

    transition:
        opacity .3s ease,
        visibility .3s ease,
        transform .55s var(--lm-solutions-ease);

    will-change:
        opacity,
        transform;
}


/* Anteprima visibile */

.lm-solutions__preview.is-visible {
    opacity: 1;
    visibility: visible;

    transform:
        translate3d(-50%, -50%, 0)
        scale(1);
}


/* =========================================================
   16 — CONTENITORE FOTOGRAFIA
   ========================================================= */

.lm-solutions__preview-inner {
    width: 100%;
    height: 100%;

    overflow: hidden;

    border-radius: 4px;

    background: #192126;

    box-shadow:
        0 20px 55px rgba(0, 0, 0, .14),
        0 5px 16px rgba(0, 0, 0, .07);
}

.lm-solutions__preview-image {
    display: block;

    width: 100%;
    height: 100%;

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

    filter:
        brightness(.88)
        contrast(1.07)
        saturate(.86);

    transform: scale(1.045);

    transition:
        transform .8s var(--lm-solutions-ease);
}

.lm-solutions__preview.is-visible
.lm-solutions__preview-image {
    transform: scale(1);
}


/* =========================================================
   17 — FOCUS
   ========================================================= */

.lm-solutions__item:focus-visible,
.lm-solutions__all-link:focus-visible {
    outline:
        2px solid var(--lm-solutions-accent);

    outline-offset: 5px;
}


/* =========================================================
   18 — TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .lm-solutions {
        --lm-solutions-side: 38px;

        padding-top: 100px;
        padding-bottom: 110px;
    }

    .lm-solutions__container {
        grid-template-columns:
            minmax(0, .85fr)
            minmax(0, 1.15fr);

        column-gap: 50px;
    }

    .lm-solutions__intro-inner {
        top: 110px;
    }

    .lm-solutions__heading {
        font-size: clamp(
            40px,
            4.8vw,
            58px
        );
    }

    .lm-solutions__description {
        font-size: 14px;
    }

    .lm-solutions__item {
        grid-template-columns:
            31px
            minmax(0, 1fr)
            17px;

        column-gap: 10px;

        min-height: 81px;
    }

    .lm-solutions__item-name {
        font-size: clamp(
            15px,
            1.85vw,
            20px
        );
    }

    .lm-solutions__preview {
        width: clamp(
            175px,
            22vw,
            245px
        );
    }

}


/* =========================================================
   19 — MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .lm-solutions {
        --lm-solutions-side: 22px;

        padding-top: 80px;
        padding-bottom: 95px;
    }

    .lm-solutions__container {
        display: flex;
        flex-direction: column;

        gap: 47px;
    }

    /* Introduzione */

    .lm-solutions__intro {
        width: 100%;
    }

    .lm-solutions__intro-inner {
        position: static;
    }

    .lm-solutions__eyebrow {
        margin-bottom: 19px;
        font-size: 9px;
    }

    .lm-solutions__heading-wrap {
        gap: 8px;
        margin-bottom: 23px;
    }

    .lm-solutions__heading {
        font-size: clamp(
            40px,
            9vw,
            56px
        );
    }

    .lm-solutions__count {
        margin-top: 4px;
        font-size: 11px;
    }

    .lm-solutions__description {
        max-width: 440px;

        margin-bottom: 28px;

        font-size: 14px;
        line-height: 1.65;
    }

    .lm-solutions__all-link {
        min-height: 45px;

        padding: 13px 16px;

        font-size: 9px;
    }

    /* Elenco */

    .lm-solutions__list-wrap,
    .lm-solutions__list {
        width: 100%;
    }

    .lm-solutions__item {
        grid-template-columns:
            28px
            minmax(0, 1fr)
            16px;

        column-gap: 10px;

        min-height: 77px;
        padding: 18px 0;
    }

    .lm-solutions__item-number {
        font-size: 10px;
    }

    .lm-solutions__item-name {
        font-size: clamp(
            15px,
            4.2vw,
            20px
        );

        line-height: 1.3;
    }

    .lm-solutions__item-arrow {
        font-size: 16px;
    }

    /*
     * Su smartphone non mostriamo
     * la fotografia flottante.
     *
     * Le voci rimangono cliccabili.
     */

    .lm-solutions__preview {
        display: none;
    }

}


/* =========================================================
   20 — SMARTPHONE PICCOLI
   ========================================================= */

@media (max-width: 390px) {

    .lm-solutions {
        --lm-solutions-side: 18px;
    }

    .lm-solutions__heading {
        font-size: 39px;
    }

    .lm-solutions__item {
        min-height: 73px;
    }

    .lm-solutions__item-name {
        font-size: 15px;
    }

}


/* =========================================================
   21 — MOVIMENTO RIDOTTO
   ========================================================= */

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

    .lm-solutions__item,
    .lm-solutions__item-name,
    .lm-solutions__item-arrow,
    .lm-solutions__all-link,
    .lm-solutions__all-arrow,
    .lm-solutions__preview,
    .lm-solutions__preview-image {
        transition: none !important;
    }

    .lm-solutions.is-ready
    .lm-solutions__item {
        opacity: 1 !important;

        transform: none !important;

        pointer-events: auto !important;
    }

    .lm-solutions__preview {
        transform: translate(-50%, -50%);
    }

}

/* =========================================================
   LM IMPIANTI — SOLUTIONS DESIGN OVERRIDE
   VERSIONE 2.0 — EDITORIAL REFINEMENT

   Incollare ALLA FINE di solutions.css
   ========================================================= */


/* =========================================================
   01 — DESIGN TOKENS
   ========================================================= */

.lm-solutions {

    --lm-solutions-width: 1440px;

    --lm-solutions-side: clamp(
        24px,
        3.2vw,
        58px
    );

    --lm-solutions-ink: #171719;
    --lm-solutions-muted: #60635f;
    --lm-solutions-line: #dedfdb;

    --lm-solutions-accent: #6100fe;
    --lm-solutions-accent-hover: #5011d0;

    --lm-solutions-ease:
        cubic-bezier(.22, 1, .36, 1);

    padding:
        clamp(90px, 7vw, 125px)
        var(--lm-solutions-side)
        clamp(100px, 8vw, 140px);

    background: #ffffff;

}


/* =========================================================
   02 — PROPORZIONI DELLE COLONNE
   ========================================================= */

/*
 * Sinistra: 40%
 * Destra: 60%
 *
 * La colonna destra acquista importanza
 * senza comprimere il testo introduttivo.
 */

.lm-solutions__container {

    grid-template-columns:
        minmax(0, 40fr)
        minmax(0, 60fr);

    column-gap: clamp(
        65px,
        7.5vw,
        145px
    );

    align-items: stretch;

}


/* =========================================================
   03 — INTRO STICKY
   ========================================================= */

.lm-solutions__intro {

    align-self: stretch;

}

.lm-solutions__intro-inner {

    top: 120px;

}


/* =========================================================
   04 — EYEBROW PIÙ DISCRETA
   ========================================================= */

.lm-solutions__eyebrow {

    gap: 9px;

    margin-bottom: 22px;

    font-size: 10px;
    letter-spacing: .11em;

    color: #828680;

}

.lm-solutions__eyebrow-mark {

    width: 5px;
    height: 5px;

    background: var(--lm-solutions-accent);

}


/* =========================================================
   05 — TITOLO EDITORIALE
   ========================================================= */

.lm-solutions__heading-wrap {

    gap: 9px;

    margin-bottom: 26px;

}

.lm-solutions__heading {

    font-size: clamp(
        46px,
        4.45vw,
        70px
    );

    font-weight: 500;

    line-height: 1.025;

    letter-spacing: -.073em;

    color: var(--lm-solutions-ink);

    text-wrap: balance;

}


/* Contatore in apice */

.lm-solutions__count {

    margin-top: 2px;

    font-size: clamp(
        12px,
        1.1vw,
        16px
    );

    line-height: 1;

    letter-spacing: -.04em;

    color: var(--lm-solutions-ink);

}


/* =========================================================
   06 — DESCRIZIONE
   ========================================================= */

.lm-solutions__description {

    max-width: 430px;

    margin-bottom: 32px;

    font-size: clamp(
        14px,
        1.1vw,
        16px
    );

    line-height: 1.65;

    letter-spacing: -.014em;

    color: var(--lm-solutions-muted);

}


/* =========================================================
   07 — CTA
   ========================================================= */

/*
 * Bottone solido, geometrico.
 * Il viola è l'unico colore d'accento
 * della sezione.
 */

.lm-solutions__all-link {

    min-height: 46px;

    gap: 24px;

    padding: 13px 19px;

    border: 1px solid var(--lm-solutions-accent);

    border-radius: 3px;

    background: var(--lm-solutions-accent);

    color: #ffffff;

    font-size: 10px;
    font-weight: 500;

    letter-spacing: .045em;

    box-shadow: none;

    transition:
        background-color .3s ease,
        border-color .3s ease,
        box-shadow .4s ease,
        transform .4s var(--lm-solutions-ease);

}

.lm-solutions__all-link:hover {

    background: var(--lm-solutions-accent-hover);

    border-color: var(--lm-solutions-accent-hover);

    color: #ffffff;

    box-shadow:
        0 9px 22px rgba(97, 0, 254, .13);

    transform: translateY(-2px);

}

.lm-solutions__all-arrow {

    font-size: 16px;

}


/* =========================================================
   08 — ELENCO PIÙ COMPATTO
   ========================================================= */

.lm-solutions__list-wrap {

    padding-top: 5px;

}

.lm-solutions__list {

    border-top: 0;

}


/*
 * Righe da 77px:
 * più compatte e vicine al riferimento.
 */

.lm-solutions__item {

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

    column-gap: 16px;

    min-height: 77px;

    padding: 18px 0;

    border-bottom:
        1px solid var(--lm-solutions-line);

    border-radius: 0;

    background: transparent;

    /*
     * Il JS controlla transform,
     * opacity e transition delle righe.
     */

}


/* Nessuna linea sopra la prima voce */

.lm-solutions__item:first-child {

    border-top: 0;

}


/* =========================================================
   09 — NUMERAZIONE TECNICA
   ========================================================= */

.lm-solutions__item-number {

    font-family:
        "Geist Mono",
        "IBM Plex Mono",
        monospace;

    font-size: 12px;

    font-weight: 400;

    letter-spacing: -.045em;

    color: #777d77;

}


/* =========================================================
   10 — TITOLI DEI SERVIZI
   ========================================================= */

.lm-solutions__item-name {

    font-family:
        "Geist Mono",
        "IBM Plex Mono",
        monospace;

    font-size: clamp(
        16px,
        1.38vw,
        21px
    );

    font-weight: 400;

    line-height: 1.3;

    letter-spacing: -.048em;

    text-transform: uppercase;

    color: inherit;

    transition:
        color .3s ease,
        translate .55s var(--lm-solutions-ease);

}


/* =========================================================
   11 — FRECCIA MINIMALE
   ========================================================= */

.lm-solutions__item-arrow {

    font-size: 18px;

    color: #979c97;

    opacity: .65;

    transition:
        color .3s ease,
        opacity .3s ease,
        transform .5s var(--lm-solutions-ease);

}


/* =========================================================
   12 — MICROINTERAZIONI
   ========================================================= */

/*
 * Un accento viola molto sottile
 * compare sulla linea inferiore.
 */

.lm-solutions__item::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -1px;

    height: 1px;

    background: var(--lm-solutions-accent);

    transform: scaleX(0);

    transform-origin: left center;

    transition:
        transform .55s var(--lm-solutions-ease);

    pointer-events: none;

}


/* Hover: il testo si sposta di pochi pixel */

.lm-solutions__item:hover
.lm-solutions__item-name,

.lm-solutions__item.is-active
.lm-solutions__item-name,

.lm-solutions__item:focus-visible
.lm-solutions__item-name {

    color: var(--lm-solutions-accent);

    translate: 5px 0;

}


/* Il numero cambia colore */

.lm-solutions__item:hover
.lm-solutions__item-number,

.lm-solutions__item.is-active
.lm-solutions__item-number,

.lm-solutions__item:focus-visible
.lm-solutions__item-number {

    color: var(--lm-solutions-accent);

}


/* La freccia diventa più presente */

.lm-solutions__item:hover
.lm-solutions__item-arrow,

.lm-solutions__item.is-active
.lm-solutions__item-arrow,

.lm-solutions__item:focus-visible
.lm-solutions__item-arrow {

    opacity: 1;

    color: var(--lm-solutions-accent);

    transform: translate(2px, -2px);

}


/* La linea viola si estende */

.lm-solutions__item:hover::after,

.lm-solutions__item.is-active::after,

.lm-solutions__item:focus-visible::after {

    transform: scaleX(1);

}


/* =========================================================
   13 — ANTEPRIMA FOTOGRAFICA
   ========================================================= */

.lm-solutions__preview {

    width: clamp(
        185px,
        17vw,
        260px
    );

    aspect-ratio: 4 / 5;

    z-index: 10;

}


/* Cornice sobria e profondità */

.lm-solutions__preview-inner {

    border-radius: 2px;

    overflow: hidden;

    background: #19191a;

    box-shadow:
        0 24px 65px rgba(0, 0, 0, .18),
        0 5px 18px rgba(0, 0, 0, .08);

}


/* Trattamento fotografico */

.lm-solutions__preview-image {

    object-fit: cover;

    filter:
        brightness(.94)
        contrast(1.04)
        saturate(.88);

}


/* =========================================================
   14 — DESKTOP INTERMEDIO
   ========================================================= */

@media (max-width: 1200px) {

    .lm-solutions__container {

        grid-template-columns:
            minmax(0, 42fr)
            minmax(0, 58fr);

        column-gap: 55px;

    }

    .lm-solutions__heading {

        font-size: clamp(
            42px,
            4.5vw,
            58px
        );

    }

    .lm-solutions__item-name {

        font-size: clamp(
            15px,
            1.55vw,
            19px
        );

    }

    .lm-solutions__item {

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

        column-gap: 12px;

        min-height: 74px;

    }

}


/* =========================================================
   15 — TABLET
   ========================================================= */

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

    .lm-solutions {

        padding-top: 90px;
        padding-bottom: 105px;

    }

    .lm-solutions__container {

        grid-template-columns:
            minmax(0, 40fr)
            minmax(0, 60fr);

        column-gap: 35px;

    }

    .lm-solutions__heading {

        font-size: clamp(
            37px,
            4.8vw,
            48px
        );

    }

    .lm-solutions__description {

        font-size: 14px;

    }

    .lm-solutions__item-name {

        font-size: 15px;

    }

    .lm-solutions__item {

        min-height: 73px;

    }

}


/* =========================================================
   16 — MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .lm-solutions {

        --lm-solutions-side: 22px;

        padding:
            78px
            var(--lm-solutions-side)
            92px;

    }

    .lm-solutions__container {

        display: flex;

        flex-direction: column;

        gap: 43px;

    }

    .lm-solutions__intro-inner {

        position: static;

    }

    .lm-solutions__heading {

        font-size: clamp(
            41px,
            9vw,
            57px
        );

    }

    .lm-solutions__description {

        max-width: 460px;

        margin-bottom: 27px;

        font-size: 14px;

    }

    .lm-solutions__list-wrap {

        padding-top: 0;

    }

    .lm-solutions__item {

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

        column-gap: 10px;

        min-height: 72px;

        padding: 17px 0;

    }

    .lm-solutions__item-number {

        font-size: 10px;

    }

    .lm-solutions__item-name {

        font-size: clamp(
            14px,
            3.85vw,
            19px
        );

        line-height: 1.3;

    }

    .lm-solutions__item-arrow {

        font-size: 16px;

    }

    .lm-solutions__preview {

        display: none;

    }

}


/* =========================================================
   17 — SMALL MOBILE
   ========================================================= */

@media (max-width: 390px) {

    .lm-solutions {

        --lm-solutions-side: 18px;

    }

    .lm-solutions__heading {

        font-size: 39px;

    }

    .lm-solutions__item-name {

        font-size: 14px;

    }

    .lm-solutions__item {

        min-height: 70px;

    }

}


/* =========================================================
   18 — ACCESSIBILITY
   ========================================================= */

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

    .lm-solutions__item::after,
    .lm-solutions__item-name {

        transition: none;

    }

    .lm-solutions__item-name {

        translate: none !important;

    }

}