.section-dashboard-section-widgets {
    --section-reports-list-columns: repeat(2, 1fr);
    --section-reports-list-gap: 12px;
    --section-reports-item-name-font-size: 22px;
    --section-reports-item-label-display: flex;
    --section-reports-item-padding: 16px 24px;
    --section-reports-item-icon-size: 56px;
    --section-reports-item-corner-size: 88px;
    --section-reports-item-details-padding: 0;
    --section-reports-item-shadow-size: 6px;
    --section-reports-item-details-font-size: 18px;
    --section-reports-gap: var(--report-grid-gap);
    --section-reports-item-border-radius: 16px;

    --title-underline-display: block;
    --section-reports-item-corner-top: auto;
    --section-reports-item-corner-right: 0;
    --section-reports-item-corner-bottom: 4px;
    --section-reports-item-corner-transform: translate(50%, 50%) rotate(45deg);
    --section-reports-item-corner-arrow-transform: none;

    @media (width <= 768px) {
        --section-reports-list-columns: repeat(1, 1fr);
        --section-reports-item-label-display: none;
        --section-reports-item-icon-size: 48px;
        /*--section-reports-item-padding: 20px 24px 16px 24px;*/
        --section-reports-list-gap: 8px;
        --section-reports-item-details-padding: 0;
        --section-reports-gap: 12px;
        --section-reports-item-shadow-size: 3px;
        --section-reports-item-name-font-size: 20px;

        /*--section-reports-item-corner-size: 64px;*/
    }

    @media (width <= 720px) {
        --section-samples-image-display: none;
    }

    @media (width <= 576px) {
        --section-reports-item-icon-size: 36px;
        /*--section-reports-item-corner-size: 48px;*/
        --section-reports-item-shadow-size: 2px;
        --section-reports-item-padding: 12px 16px;

        --section-reports-item-name-font-size: 18px;
    }

    @media (width <= 440px) {
        --section-reports-item-details-font-size: 16px;
    }

    &.widgets-titles-only {
        --title-underline-display: none;
        --section-reports-item-corner-top: 50%;
        --section-reports-item-corner-right: 8px;
        --section-reports-item-corner-bottom: 4px;
        --section-reports-item-corner-transform: none;
        --section-reports-item-corner-arrow-transform: translateY(-50%);
    }

    display: grid;
    grid-template-columns: var(--section-reports-list-columns);
    gap: var(--section-reports-gap);

    .section-widget {
        --title-color: var(--color-btm-dark-blue);
        --shadow-color: rgb(from #0035b8 r g b / 0.15);
        --corner-color: rgb(from #0035b8 r g b / 0.15);
        --background-color: #fef5ec;
        --outline-color: rgb(from var(--color-btm-dark-blue) r g b / 0.25);
        --arrow-color: rgb(from var(--color-btm-dark-blue) r g b / 0.5);
        --label-color: rgb(from var(--color-btm-dark-blue) r g b / 0.5);
        --details-color: var(--color-btm-dark-blue);
        --title-underline-color: rgb(from var(--outline-color) r g b / 0.075);

        position: relative;
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: start;
        gap: var(--section-reports-list-gap);
        padding: var(--section-reports-item-padding);
        border-radius: var(--section-reports-item-border-radius);
        text-decoration: none;
        overflow: hidden;
        box-shadow:
            0 0 0 1px var(--outline-color),
            var(--section-reports-item-shadow-size) var(--section-reports-item-shadow-size) 0 0 var(--shadow-color)
    ;
        transition: all .2s linear;
        background-color: var(--background-color);

        &.item-action-plan { --item-icon: url('/assets/svg/reports/action-plan-UTfhJTr.svg'); }
        &.item-health-insights { --item-icon: url('/assets/svg/reports/health-insights-WCGv6ta.svg'); }
        &.item-longevity-report { --item-icon: url('/assets/svg/reports/longevity-report-ptVVvsH.svg'); }
        &.item-numbers-charts { --item-icon: url('/assets/svg/reports/numbers-charts-Q04u_WS.svg'); }
        &.item-nutrition-protocol { --item-icon: url('/assets/svg/reports/nutrition-protocol-g2HkdQ_.svg'); }
        &.item-targeted-nutrition { --item-icon: url('/assets/svg/reports/targeted-nutrition-ruRZkQZ.svg'); }
        &.item-diy-guide { --item-icon: url('/assets/svg/reports/diy-guide-byoOQPA.svg'); }
        &.item-video-learning { --item-icon: url('/assets/svg/reports/video-learning-4pI8E2M.svg'); }

        &:hover {
            --title-color: var(--color-da-orange);
            --shadow-color: var(--color-da-orange);
            --corner-color: var(--color-da-orange);
            --outline-color: rgb(from var(--color-btm-dark-blue) r g b / 0.75);
            --grid-color: #fef5ec;
            --background-color: rgb(from var(--color-btm-dark-blue) r g b / 0.75);
            --arrow-color: #fff;
            --details-color: #fff;
            --title-underline-color: rgb(from #fff r g b / 0.25);
        }

        &:before {
            content: '';
            display: block;
            position: absolute;
            z-index: 0;
            width: var(--section-reports-item-corner-size);
            height: var(--section-reports-item-corner-size);
            right: 0;
            bottom: 0;
            transition: all .2s linear;
            transform: var(--section-reports-item-corner-transform);
            background-color: var(--corner-color);
        }

        &:after {
            content: '';
            display: block;
            position: absolute;
            width: calc(var(--section-reports-item-corner-size) / 3);
            height: calc(var(--section-reports-item-corner-size) / 3);
            top: var(--section-reports-item-corner-top);
            right: var(--section-reports-item-corner-right);
            bottom: var(--section-reports-item-corner-bottom);
            transform: var(--section-reports-item-corner-arrow-transform);
            transition: all .2s linear;
            background-color: var(--arrow-color);
            mask: url('/assets/svg/arrows/right-simple-Sgb4HTd.svg') no-repeat center;
        }

        .widget-title {
            display: flex;
            flex-direction: column;
            align-items: start;
            justify-content: start;
            gap: 8px;
            transition: all .2s linear;

            &:after {
                content: '';
                display: var(--title-underline-display);
                width: 100%;
                height: 4px;
                transition: all .2s linear;
                background-color: var(--title-underline-color);
            }

            .widget-label {
                position: relative;
                display: var(--section-reports-item-label-display);
                align-items: center;
                justify-content: center;
                padding: 0 16px;
                height: 32px;
                border-radius: 8px;
                font-size: 16px;
                font-weight: 500;
                line-height: 1;
                color: #fff;
                background-color: var(--label-color);
            }

            .widget-name {
                position: relative;
                font-size: var(--section-reports-item-name-font-size);
                line-height: 1;
                font-weight: 600;
                text-transform: uppercase;
                color: var(--title-color);
                font-family: 'IBM Plex Sans', sans-serif;
                transition: all .2s linear;
            }
        }

        .widget-details {
            padding: var(--section-reports-item-details-padding);
            font-size: var(--section-reports-item-details-font-size);
            line-height: 1.325;
            font-weight: 400;
            color: var(--details-color);
            transition: all .2s linear;
        }
    }
}