.diagnostic-item__summary {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.25rem;
}

.diagnostic-item__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 84px;
    height: 84px;

    border-radius: 1.25rem;
    background: var(--villa-surface-green);
}

.diagnostic-item__icon img {
    display: block;
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.diagnostic-item__main {
    min-width: 0;
}

@media (max-width: 767.98px) {

    .diagnostic-item__summary {
        grid-template-columns: 64px minmax(0, 1fr);
        grid-template-areas:
            "icon title"
            "short short"
            "action action";

        gap: .85rem 1rem;
        padding: 1rem;
    }

    .diagnostic-item__icon {
        grid-area: icon;

        width: 64px;
        height: 64px;

        border-radius: 1rem;
    }

    .diagnostic-item__icon img {
        width: 34px;
        height: 34px;
    }


    /*
     * На desktop main является обычной обёрткой.
     * На mobile "растворяем" её, чтобы title и short
     * могли стать отдельными grid-элементами.
     */

    .diagnostic-item__main {
        display: contents;
    }

    .diagnostic-item__main .villa-disclosure__title {
        grid-area: title;

        align-self: center;

        margin-bottom: 0;

        font-size: 1.1rem;
        line-height: 1.25;
    }

    .diagnostic-item__main .villa-disclosure__short {
        grid-area: short;

        margin: 0;

        font-size: .95rem;
        line-height: 1.5;
    }


    .diagnostic-item__summary .villa-disclosure__action {
        grid-area: action;

        justify-self: start;

        margin-top: .15rem;
    }

}