/* =========================================================
   ASPIC FVG – ACCESSO SOCI V2
   NUOVA IDENTITÀ GRAFICA
========================================================= */

.aspic-access,
.aspic-access * {
    box-sizing: border-box;
}


/* =========================================================
   PALETTE
========================================================= */

.aspic-access {
    --aspic-blue: #143677;

    --aspic-orange: #F2A34A;
    --aspic-orange-soft: #FFF1DF;

    --aspic-green: #78A980;
    --aspic-green-soft: #EDF6EE;

    --aspic-bordeaux: #B45F78;
    --aspic-bordeaux-soft: #F8E8ED;

    --aspic-blue-soft: #EEF5FC;

    --aspic-text: #4F5968;
    --aspic-text-light: #707988;

    width:
        min(
            1480px,
            calc(100% - 60px)
        );

    margin:
        0 auto;

    padding:
        70px 0 90px;

    color:
        var(--aspic-text);

    font-family:
        "Manrope",
        sans-serif;
}


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

.aspic-access__hero {
    position: relative;

    max-width:
        none;

    margin-bottom:
        35px;

    padding:
        72px 55px 68px;

    overflow:
        hidden;

    background:
        linear-gradient(
            135deg,
            #FFF1DF 0%,
            #FFF8F2 48%,
            var(--aspic-green-soft) 100%
        );

    border:
        1px solid rgba(20,54,119,.05);

    border-radius:
        28px;

    box-shadow:
        0 14px 40px
        rgba(20,54,119,.05);
}


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

.aspic-access__hero::before {
    content: "";

    position:
        absolute;

    width:
        260px;

    height:
        160px;

    top:
        -85px;

    right:
        6%;

    background:
        var(--aspic-bordeaux);

    border-radius:
        48% 52% 61% 39% /
        43% 56% 44% 57%;

    opacity:
        .12;

    transform:
        rotate(13deg);

    pointer-events:
        none;
}


.aspic-access__hero::after {
    content: "";

    position:
        absolute;

    width:
        230px;

    height:
        150px;

    left:
        -90px;

    bottom:
        -80px;

    background:
        var(--aspic-green);

    border-radius:
        58% 42% 38% 62% /
        46% 60% 40% 54%;

    opacity:
        .15;

    transform:
        rotate(-10deg);

    pointer-events:
        none;
}


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

.aspic-access__eyebrow {
    position:
        relative;

    z-index:
        2;

    display:
        inline-flex;

    align-items:
        center;

    margin-bottom:
        14px;

    padding:
        7px 13px;

    color:
        var(--aspic-bordeaux);

    background:
        var(--aspic-bordeaux-soft);

    border-radius:
        100px;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        1.1px;

    text-transform:
        uppercase;
}


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

.aspic-access__hero h1 {
    position:
        relative;

    z-index:
        2;

    max-width:
        950px;

    margin:
        0;

    color:
        var(--aspic-blue);

    font-family:
        "Nunito Sans",
        "Manrope",
        sans-serif;

    font-size:
        clamp(
            58px,
            5.8vw,
            82px
        );

    font-weight:
        600;

    letter-spacing:
        -1.7px;

    line-height:
        .96;
}


.aspic-access__hero h1 em {
    display:
        block;

    color:
        var(--aspic-bordeaux);

    font-style:
        normal;

    font-weight:
        700;
}


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

.aspic-access__hero p {
    position:
        relative;

    z-index:
        2;

    max-width:
        700px;

    margin:
        23px 0 0;

    color:
        var(--aspic-text);

    font-size:
        15px;

    font-weight:
        500;

    line-height:
        1.75;
}


/* =========================================================
   NOTICE
========================================================= */

.aspic-access__notice {
    margin-bottom:
        22px;

    padding:
        15px 18px;

    border-radius:
        11px;

    font-size:
        12px;

    line-height:
        1.6;
}


.aspic-access__notice--error {
    color:
        #8E4357;

    background:
        var(--aspic-bordeaux-soft);

    border:
        1px solid rgba(180,95,120,.13);
}


/* =========================================================
   LOGIN
========================================================= */

.aspic-access__login {
    display:
        grid;

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

    gap:
        70px;

    align-items:
        center;

    margin-bottom:
        22px;

    padding:
        46px;

    background:
        linear-gradient(
            135deg,
            var(--aspic-green-soft) 0%,
            #ffffff 58%,
            var(--aspic-orange-soft) 100%
        );

    border:
        1px solid rgba(20,54,119,.06);

    border-radius:
        22px;

    box-shadow:
        0 11px 30px rgba(20,54,119,.045);
}


/* =========================================================
   LOGIN COPY
========================================================= */

.aspic-access__login-copy > span {
    display:
        inline-flex;

    margin-bottom:
        12px;

    padding:
        6px 10px;

    color:
        var(--aspic-bordeaux);

    background:
        var(--aspic-bordeaux-soft);

    border-radius:
        100px;

    font-size:
        8px;

    font-weight:
        900;

    letter-spacing:
        1px;

    text-transform:
        uppercase;
}


.aspic-access__login-copy h2 {
    max-width:
        470px;

    margin:
        0;

    color:
        var(--aspic-blue);

    font-family:
        "Nunito Sans",
        "Manrope",
        sans-serif;

    font-size:
        44px;

    font-weight:
        650;

    letter-spacing:
        -.7px;

    line-height:
        1;
}


.aspic-access__login-copy p {
    max-width:
        470px;

    margin:
        16px 0 0;

    color:
        var(--aspic-text);

    font-size:
        12.5px;

    line-height:
        1.7;
}


/* =========================================================
   FIELD
========================================================= */

.aspic-access__field {
    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;
}


.aspic-access__field label {
    color:
        var(--aspic-blue);

    font-size:
        10px;

    font-weight:
        800;
}


.aspic-access__field input {
    width:
        100%;

    min-height:
        51px;

    padding:
        0 14px;

    color:
        #333b48;

    background:
        rgba(255,255,255,.96);

    border:
        1px solid rgba(20,54,119,.11);

    border-radius:
        9px;

    box-shadow:
        0 4px 14px rgba(20,54,119,.025);

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        13px;

    outline:
        none;

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


.aspic-access__field input:hover {
    border-color:
        rgba(180,95,120,.28);
}


.aspic-access__field input:focus {
    background:
        #ffffff;

    border-color:
        var(--aspic-bordeaux);

    box-shadow:
        0 0 0 3px rgba(180,95,120,.09);
}


.aspic-access__field small {
    color:
        var(--aspic-text-light);

    font-size:
        9.5px;

    line-height:
        1.5;
}


/* =========================================================
   LOGIN FORM
========================================================= */

.aspic-access__login-form {
    display:
        flex;

    flex-direction:
        column;

    gap:
        15px;
}


.aspic-access__login-options {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    font-size:
        10px;
}


.aspic-access__login-options a {
    color:
        var(--aspic-bordeaux);

    font-weight:
        700;

    text-decoration:
        none;
}


.aspic-access__login-options a:hover {
    color:
        var(--aspic-blue);
}


/* =========================================================
   REMEMBER
========================================================= */

.aspic-access__remember {
    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    color:
        var(--aspic-text);

    cursor:
        pointer;
}


.aspic-access__remember input {
    width:
        15px;

    height:
        15px;

    margin:
        0;

    accent-color:
        var(--aspic-bordeaux);
}


/* =========================================================
   PRIMARY BUTTON
========================================================= */

.aspic-access__primary-button {
    display:
        inline-flex;

    min-height:
        52px;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;

    padding:
        0 18px;

    color:
        #ffffff !important;

    background:
        var(--aspic-bordeaux);

    border:
        1px solid var(--aspic-bordeaux);

    border-radius:
        10px;

    box-shadow:
        0 8px 20px rgba(180,95,120,.16);

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        11px;

    font-weight:
        800;

    text-decoration:
        none;

    cursor:
        pointer;

    transition:
        background .25s ease,
        border-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}


.aspic-access__primary-button:hover {
    color:
        #ffffff !important;

    background:
        var(--aspic-blue);

    border-color:
        var(--aspic-blue);

    transform:
        translateY(-2px);

    box-shadow:
        0 11px 26px rgba(20,54,119,.16);
}


/* =========================================================
   PATHS
========================================================= */

.aspic-access__paths {
    display:
        grid;

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

    gap:
        20px;
}


/* =========================================================
   PATH CARD
========================================================= */

.aspic-access__path {
    position:
        relative;

    display:
        flex;

    min-width:
        0;

    min-height:
        360px;

    flex-direction:
        column;

    padding:
        36px;

    overflow:
        hidden;

    border:
        1px solid rgba(20,54,119,.06);

    border-radius:
        21px;

    box-shadow:
        0 9px 26px rgba(20,54,119,.045);
}


.aspic-access__path--member {
    background:
        linear-gradient(
            145deg,
            var(--aspic-green-soft),
            #ffffff 70%
        );
}


.aspic-access__path--new {
    background:
        linear-gradient(
            145deg,
            var(--aspic-orange-soft),
            #ffffff 70%
        );
}


/* =========================================================
   PATH DECORATION
========================================================= */

.aspic-access__path::after {
    content: "";

    position:
        absolute;

    width:
        180px;

    height:
        140px;

    right:
        -90px;

    bottom:
        -80px;

    background:
        var(--aspic-bordeaux-soft);

    border-radius:
        50%;

    pointer-events:
        none;
}


/* =========================================================
   PATH NUMBER
========================================================= */

.aspic-access__path-number {
    position:
        absolute;

    right:
        25px;

    top:
        20px;

    color:
        rgba(20,54,119,.08);

    font-family:
        "Nunito Sans",
        "Manrope",
        sans-serif;

    font-size:
        70px;

    font-weight:
        700;

    line-height:
        1;
}


/* =========================================================
   PATH EYEBROW
========================================================= */

.aspic-access__path-eyebrow {
    display:
        inline-flex;

    align-self:
        flex-start;

    margin-bottom:
        11px;

    padding:
        6px 10px;

    color:
        var(--aspic-green);

    background:
        rgba(255,255,255,.82);

    border-radius:
        100px;

    font-size:
        8px;

    font-weight:
        900;

    letter-spacing:
        1px;

    text-transform:
        uppercase;
}


.aspic-access__path--new
.aspic-access__path-eyebrow {
    color:
        var(--aspic-orange);
}


/* =========================================================
   PATH TITLE
========================================================= */

.aspic-access__path h2 {
    max-width:
        500px;

    margin:
        0;

    color:
        var(--aspic-blue);

    font-family:
        "Nunito Sans",
        "Manrope",
        sans-serif;

    font-size:
        40px;

    font-weight:
        650;

    letter-spacing:
        -.6px;

    line-height:
        1;
}


/* =========================================================
   PATH DESCRIPTION
========================================================= */

.aspic-access__path > p {
    max-width:
        520px;

    margin:
        16px 0 28px;

    color:
        var(--aspic-text);

    font-size:
        12.5px;

    line-height:
        1.7;
}


/* =========================================================
   REGISTRATION ACCORDION
========================================================= */

.aspic-access__registration {
    position:
        relative;

    z-index:
        2;

    margin-top:
        auto;

    border-top:
        1px solid rgba(20,54,119,.08);
}


.aspic-access__registration summary {
    display:
        flex;

    min-height:
        58px;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    color:
        var(--aspic-blue);

    cursor:
        pointer;

    font-size:
        11px;

    font-weight:
        800;

    list-style:
        none;
}


.aspic-access__registration summary::-webkit-details-marker {
    display:
        none;
}


.aspic-access__registration summary span {
    display:
        inline-flex;

    width:
        30px;

    height:
        30px;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--aspic-bordeaux);

    background:
        var(--aspic-bordeaux-soft);

    border-radius:
        50%;

    font-size:
        18px;

    font-weight:
        400;

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


.aspic-access__registration[open]
summary span {
    color:
        #ffffff;

    background:
        var(--aspic-bordeaux);

    transform:
        rotate(45deg);
}


/* =========================================================
   REGISTRATION FORM
========================================================= */

.aspic-access__registration-form {
    padding-top:
        15px;
}


.aspic-access__registration-grid {
    display:
        grid;

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

    gap:
        16px 14px;
}


.aspic-access__field--full {
    grid-column:
        1 / -1;
}


/* =========================================================
   VERIFICATION NOTE
========================================================= */

.aspic-access__verification-note {
    margin:
        18px 0;

    padding:
        15px 16px;

    background:
        var(--aspic-green-soft);

    border:
        1px solid rgba(120,169,128,.10);

    border-radius:
        10px;
}


.aspic-access__verification-note strong {
    display:
        block;

    margin-bottom:
        4px;

    color:
        var(--aspic-blue);

    font-size:
        10px;
}


.aspic-access__verification-note p {
    margin:
        0;

    color:
        var(--aspic-text);

    font-size:
        10px;

    line-height:
        1.6;
}


/* =========================================================
   NEW MEMBER FOOTER
========================================================= */

.aspic-access__new-footer {
    display:
        flex;

    margin-top:
        auto;

    flex-direction:
        column;

    gap:
        15px;
}


.aspic-access__new-footer > span {
    color:
        #8A6A69;

    font-size:
        9px;

    font-weight:
        700;
}


/* =========================================================
   SECONDARY BUTTON
========================================================= */

.aspic-access__secondary-button {
    display:
        inline-flex;

    min-height:
        52px;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        0 18px;

    color:
        var(--aspic-blue) !important;

    background:
        #ffffff;

    border:
        1px solid rgba(20,54,119,.10);

    border-radius:
        10px;

    font-size:
        11px;

    font-weight:
        800;

    text-decoration:
        none;

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


.aspic-access__secondary-button:hover {
    color:
        #ffffff !important;

    background:
        var(--aspic-green);

    border-color:
        var(--aspic-green);

    transform:
        translateY(-2px);
}


/* =========================================================
   LOGGED SIMPLE BLOCK
========================================================= */

.aspic-access__logged {
    max-width:
        760px;

    padding:
        42px;

    background:
        linear-gradient(
            135deg,
            var(--aspic-green-soft),
            #ffffff 55%,
            var(--aspic-orange-soft)
        );

    border:
        1px solid rgba(20,54,119,.06);

    border-radius:
        20px;

    box-shadow:
        0 10px 30px rgba(20,54,119,.045);
}


.aspic-access__logged h2 {
    margin:
        0;

    color:
        var(--aspic-blue);

    font-family:
        "Nunito Sans",
        "Manrope",
        sans-serif;

    font-size:
        48px;

    font-weight:
        650;

    line-height:
        1;
}


.aspic-access__logged p {
    margin:
        15px 0 24px;

    color:
        var(--aspic-text);

    font-size:
        13px;

    line-height:
        1.7;
}


/* =========================================================
   DASHBOARD UTENTE LOGGATO
========================================================= */

.aspic-access--logged {
    max-width:
        1480px;
}


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

.aspic-access-dashboard__hero {
    position:
        relative;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        50px;

    padding:
        50px;

    overflow:
        hidden;

    background:
        linear-gradient(
            135deg,
            var(--aspic-green-soft) 0%,
            #ffffff 54%,
            var(--aspic-orange-soft) 100%
        );

    border:
        1px solid rgba(20,54,119,.06);

    border-radius:
        24px;

    box-shadow:
        0 12px 35px rgba(20,54,119,.05);
}


/* decorative blob */

.aspic-access-dashboard__hero::after {
    content: "";

    position:
        absolute;

    width:
        240px;

    height:
        180px;

    right:
        -95px;

    top:
        -95px;

    background:
        var(--aspic-bordeaux);

    border-radius:
        50%;

    opacity:
        .12;

    pointer-events:
        none;
}


/* =========================================================
   DASHBOARD HERO COPY
========================================================= */

.aspic-access-dashboard__hero-copy {
    position:
        relative;

    z-index:
        2;

    max-width:
        720px;
}


.aspic-access-dashboard__hero h1 {
    margin:
        0;

    color:
        var(--aspic-blue);

    font-family:
        "Nunito Sans",
        "Manrope",
        sans-serif;

    font-size:
        clamp(
            54px,
            5vw,
            74px
        );

    font-weight:
        650;

    letter-spacing:
        -1.3px;

    line-height:
        .97;
}


.aspic-access-dashboard__hero p {
    max-width:
        650px;

    margin:
        18px 0 0;

    color:
        var(--aspic-text);

    font-size:
        13px;

    line-height:
        1.75;
}


.aspic-access-dashboard__hero
.aspic-access__primary-button {
    position:
        relative;

    z-index:
        2;

    min-width:
        235px;

    flex:
        0 0 auto;
}


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

.aspic-access-dashboard__stats {
    display:
        grid;

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

    gap:
        16px;

    margin-top:
        18px;
}


.aspic-access-dashboard__stat {
    min-height:
        160px;

    padding:
        26px;

    background:
        #ffffff;

    border:
        1px solid rgba(20,54,119,.06);

    border-radius:
        17px;

    box-shadow:
        0 8px 24px rgba(20,54,119,.035);
}


/* colors */

.aspic-access-dashboard__stat:nth-child(1) {
    background:
        var(--aspic-bordeaux-soft);
}


.aspic-access-dashboard__stat:nth-child(2) {
    background:
        var(--aspic-green-soft);
}


.aspic-access-dashboard__stat:nth-child(3) {
    background:
        var(--aspic-orange-soft);
}


/* =========================================================
   STAT LABEL
========================================================= */

.aspic-access-dashboard__stat > span {
    display:
        inline-flex;

    margin-bottom:
        14px;

    padding:
        5px 8px;

    color:
        var(--aspic-bordeaux);

    background:
        rgba(255,255,255,.78);

    border-radius:
        100px;

    font-size:
        8px;

    font-weight:
        900;

    letter-spacing:
        1px;

    text-transform:
        uppercase;
}


/* =========================================================
   STAT VALUE
========================================================= */

.aspic-access-dashboard__stat > strong {
    display:
        block;

    color:
        var(--aspic-blue);

    font-family:
        "Nunito Sans",
        "Manrope",
        sans-serif;

    font-size:
        31px;

    font-weight:
        650;

    line-height:
        1.05;
}


.aspic-access-dashboard__stat small {
    display:
        block;

    margin-top:
        8px;

    color:
        var(--aspic-text-light);

    font-size:
        10px;

    line-height:
        1.5;
}


/* =========================================================
   STATUS
========================================================= */

.aspic-access-dashboard__status {
    display:
        inline-flex !important;

    width:
        auto;

    min-height:
        34px;

    align-items:
        center;

    padding:
        7px 11px;

    border-radius:
        100px;

    font-family:
        "Manrope",
        sans-serif !important;

    font-size:
        10px !important;

    font-weight:
        800 !important;
}


.aspic-access-dashboard__status.is-active {
    color:
        #426F49;

    background:
        var(--aspic-green-soft);
}


.aspic-access-dashboard__status.is-pending {
    color:
        #A36F20;

    background:
        var(--aspic-orange-soft);
}


.aspic-access-dashboard__status.is-rejected {
    color:
        #8E4357;

    background:
        var(--aspic-bordeaux-soft);
}


/* =========================================================
   DASHBOARD LINKS
========================================================= */

.aspic-access-dashboard__links {
    display:
        grid;

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

    gap:
        16px;

    margin-top:
        18px;
}


.aspic-access-dashboard__links a {
    position:
        relative;

    display:
        flex;

    min-height:
        120px;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        23px 52px 23px 23px;

    color:
        var(--aspic-blue);

    background:
        #ffffff;

    border:
        1px solid rgba(20,54,119,.07);

    border-radius:
        16px;

    box-shadow:
        0 7px 22px rgba(20,54,119,.03);

    text-decoration:
        none;

    transition:
        background .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}


/* alternate background */

.aspic-access-dashboard__links a:nth-child(1):hover {
    background:
        var(--aspic-bordeaux-soft);
}


.aspic-access-dashboard__links a:nth-child(2):hover {
    background:
        var(--aspic-green-soft);
}


.aspic-access-dashboard__links a:nth-child(3):hover {
    background:
        var(--aspic-orange-soft);
}


.aspic-access-dashboard__links a:hover {
    color:
        var(--aspic-blue);

    transform:
        translateY(-3px);

    box-shadow:
        0 11px 27px rgba(20,54,119,.06);
}


.aspic-access-dashboard__links a > span {
    margin-bottom:
        6px;

    color:
        var(--aspic-bordeaux);

    font-size:
        8px;

    font-weight:
        900;

    letter-spacing:
        1px;

    text-transform:
        uppercase;
}


.aspic-access-dashboard__links a > strong {
    color:
        var(--aspic-blue);

    font-family:
        "Nunito Sans",
        "Manrope",
        sans-serif;

    font-size:
        25px;

    font-weight:
        650;

    line-height:
        1.1;
}


.aspic-access-dashboard__links a i {
    position:
        absolute;

    right:
        20px;

    top:
        50%;

    color:
        var(--aspic-bordeaux);

    font-size:
        20px;

    font-style:
        normal;

    transform:
        translateY(-50%);

    transition:
        transform .25s ease;
}


.aspic-access-dashboard__links a:hover i {
    transform:
        translate(4px,-50%);
}


/* =========================================================
   DESKTOP MEDIO
========================================================= */

@media (max-width: 1280px) {

    .aspic-access {
        width:
            min(
                1160px,
                calc(100% - 40px)
            );
    }


    .aspic-access__hero {
        padding:
            65px 48px 62px;
    }


    .aspic-access__login {
        gap:
            50px;

        padding:
            40px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

    .aspic-access {
        width:
            min(
                920px,
                calc(100% - 32px)
            );

        padding:
            55px 0 70px;
    }


    .aspic-access__login {
        gap:
            38px;

        padding:
            35px;
    }


    .aspic-access__paths {
        grid-template-columns:
            1fr;
    }


    .aspic-access__path {
        min-height:
            0;
    }


    .aspic-access-dashboard__hero {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            25px;
    }


    .aspic-access-dashboard__stats,
    .aspic-access-dashboard__links {
        grid-template-columns:
            1fr;
    }


    .aspic-access-dashboard__hero
    .aspic-access__primary-button {
        min-width:
            0;

        width:
            100%;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .aspic-access {
        width:
            calc(100% - 28px);

        padding:
            35px 0 55px;
    }


    /* HERO */

    .aspic-access__hero {
        margin-bottom:
            25px;

        padding:
            45px 22px 42px;

        border-radius:
            21px;
    }


    .aspic-access__hero h1 {
        font-size:
            48px;

        letter-spacing:
            -.9px;
    }


    .aspic-access__hero p {
        font-size:
            13px;
    }


    /* LOGIN */

    .aspic-access__login {
        grid-template-columns:
            1fr;

        gap:
            26px;

        padding:
            28px 21px;

        border-radius:
            18px;
    }


    .aspic-access__login-copy h2 {
        font-size:
            37px;
    }


    .aspic-access__login-options {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            9px;
    }


    /* PATHS */

    .aspic-access__paths {
        grid-template-columns:
            1fr;

        gap:
            14px;
    }


    .aspic-access__path {
        padding:
            28px 21px;

        border-radius:
            18px;
    }


    .aspic-access__path h2 {
        font-size:
            34px;
    }


    .aspic-access__path-number {
        right:
            17px;

        top:
            16px;

        font-size:
            54px;
    }


    /* REGISTRATION */

    .aspic-access__registration-grid {
        grid-template-columns:
            1fr;
    }


    .aspic-access__field--full {
        grid-column:
            auto;
    }


    /* BUTTON */

    .aspic-access__primary-button,
    .aspic-access__secondary-button {
        width:
            100%;
    }


    /* LOGGED */

    .aspic-access__logged {
        padding:
            29px 22px;
    }


    .aspic-access__logged h2 {
        font-size:
            39px;
    }


    /* DASHBOARD */

    .aspic-access-dashboard__hero {
        padding:
            30px 22px;

        border-radius:
            19px;
    }


    .aspic-access-dashboard__hero h1 {
        font-size:
            46px;
    }


    .aspic-access-dashboard__hero p {
        font-size:
            12px;
    }


    .aspic-access-dashboard__stats {
        gap:
            12px;

        margin-top:
            14px;
    }


    .aspic-access-dashboard__stat {
        min-height:
            0;

        padding:
            21px;
    }


    .aspic-access-dashboard__links {
        gap:
            12px;

        margin-top:
            14px;
    }


    .aspic-access-dashboard__links a {
        min-height:
            105px;

        padding:
            20px 48px 20px 20px;
    }

}


/* =========================================================
   MOBILE PICCOLO
========================================================= */

@media (max-width: 420px) {

    .aspic-access {
        width:
            calc(100% - 20px);
    }


    .aspic-access__hero {
        padding:
            40px 19px 38px;
    }


    .aspic-access__hero h1 {
        font-size:
            43px;
    }


    .aspic-access__path h2 {
        font-size:
            31px;
    }


    .aspic-access-dashboard__hero h1 {
        font-size:
            42px;
    }

}