.sapElisaResultListItem {
    display: flex;
    flex-direction: row;
    align-items: end;

    // 1. selection checkbox
    .sapElisaSelectionContainer {
        width: 2rem;
        align-self: flex-start;
        .sapMCb {
            margin-top: 0.2rem;
        }
    }

    // 2. content with title + attributes + navgiation targets
    .sapElisaContentContainer {
        flex-grow: 1;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        b {
            background-color: @sapUiContentSearchHighlightColor;
        }

        // 2.1 title area
        .sapElisaTitleContainer {
            .sapElisaTitle {
                font-size: 1.125rem;
                margin-right: 1rem;
            }

            .sapElisaDescription {
                margin-right: 0.5rem;
            }

            .sapElisaDelimiter {
                margin-right: 0.5rem;
            }
        }

        // 2.2 attributes area
        .sapElisaAttributesGrid {
            display: grid;
            gap: 0.9rem 1.5rem;
            margin-top: 0.75rem;
            padding-left: 1.75rem;

            .sapElisaAttribute {
                display: flex;
                flex-direction: column;
            }

            .sapElisaAttributeImage {
                top: -1.5rem;
                position: relative;
                height: 2rem;
                img {
                    height: 4.4rem;
                    max-width: 4.4rem;
                }
                .sapElisaRound {
                    object-fit: cover;
                    border-radius: 50%;
                }
            }
        }
        .sapElisaAttributesGrid.visible {
            display: grid;
        }

        // 2.3 navigation targets area
        .sapElisaNavigationTargets {
            .sapMTB.sapMTBStandard {
                border-bottom: none;
            }
        }
    }

    // 3. expand button
    .sapElisaExpandButtonContainer {
        width: 2.3rem;
        .sapMBtnInner {
            border: none;
        }
    }
}

/* Desktop grid layout (4 columns, 3 rows) */
@media (min-width: 1151px) {
    .sapElisaResultListItem.sapElisaCollapsed .sapElisaContentContainer {
        .sapElisaAttributesGrid .sapElisaExpandArea-Desktop {
            display: none;
        }
        .sapElisaNavigationTargets.sapElisaExpandArea-Desktop {
            display: none;
        }
    }

    .sapElisaResultListItem .sapElisaContentContainer .sapElisaAttributesGrid {
        grid-template-columns: repeat(4, 1fr);

        .sapElisaRow-Desktop-1 {
            grid-row: 1;
        }
        .sapElisaRow-Desktop-2 {
            grid-row: 2;
        }
        .sapElisaRow-Desktop-3 {
            grid-row: 3;
        }
        .sapElisaCol-Desktop-1 {
            grid-column-start: 1;
        }
        .sapElisaCol-Desktop-2 {
            grid-column-start: 2;
        }
        .sapElisaCol-Desktop-3 {
            grid-column-start: 3;
        }
        .sapElisaCol-Desktop-4 {
            grid-column-start: 4;
        }
        .sapElisaAttributeLength-Desktop-1 {
            grid-column-end: span 1;
        }
        .sapElisaAttributeLength-Desktop-2 {
            grid-column-end: span 2;
        }
        .sapElisaAttributeLength-Desktop-3 {
            grid-column-end: span 3;
        }
        .sapElisaAttributeLength-Desktop-4 {
            grid-column-end: span 4;
        }
        .sapElisaAttributeHidden-Desktop {
            display: none;
        }
    }
}

/* Mobile/Tablet grid layout (3 columns, 4 rows) */
@media (min-width: 768px) and (max-width: 1150px) {
    .sapElisaResultListItem.sapElisaCollapsed .sapElisaContentContainer {
        .sapElisaAttributesGrid .sapElisaExpandArea-Tablet {
            display: none;
        }
        .sapElisaNavigationTargets.sapElisaExpandArea-Tablet {
            display: none;
        }
    }
    .sapElisaResultListItem .sapElisaContentContainer .sapElisaAttributesGrid {
        grid-template-columns: repeat(3, 1fr);

        .sapElisaRow-Tablet-1 {
            grid-row: 1;
        }
        .sapElisaRow-Tablet-2 {
            grid-row: 2;
        }
        .sapElisaRow-Tablet-3 {
            grid-row: 3;
        }
        .sapElisaRow-Tablet-4 {
            grid-row: 4;
        }
        .sapElisaCol-Tablet-1 {
            grid-column-start: 1;
        }
        .sapElisaCol-Tablet-2 {
            grid-column-start: 2;
        }
        .sapElisaCol-Tablet-3 {
            grid-column-start: 3;
        }
        .sapElisaAttributeLength-Tablet-1 {
            grid-column-end: span 1;
        }
        .sapElisaAttributeLength-Tablet-2 {
            grid-column-end: span 2;
        }
        .sapElisaAttributeLength-Tablet-3 {
            grid-column-end: span 3;
        }
        .sapElisaAttributeHidden-Tablet {
            display: none;
        }
    }
}

/* Phone grid layout (1 column, 12 rows) */
@media (max-width: 767px) {
    .sapElisaResultListItem.sapElisaCollapsed .sapElisaContentContainer {
        .sapElisaAttributesGrid .sapElisaExpandArea-Phone {
            display: none;
        }
        .sapElisaNavigationTargets.sapElisaExpandArea-Phone {
            display: none;
        }
    }

    .sapElisaResultListItem .sapElisaContentContainer .sapElisaAttributesGrid {
        grid-template-columns: 1fr;
        gap: 0.3rem 1.5rem;
        .sapElisaAttribute {
            flex-direction: row;
            .sapElisaAttributeLabel {
                margin-right: 0.5rem;
            }
            .sapElisaAttributeValue {
                font-size: @sapMFontMediumSize;
            }
        }
        .sapElisaAttributeImage {
            top: 0;
            position: relative;
            height: auto;
        }

        .sapElisaRow-Phone-1 {
            grid-row: 1;
        }
        .sapElisaRow-Phone-2 {
            grid-row: 2;
        }
        .sapElisaRow-Phone-3 {
            grid-row: 3;
        }
        .sapElisaRow-Phone-4 {
            grid-row: 4;
        }
        .sapElisaRow-Phone-5 {
            grid-row: 5;
        }
        .sapElisaRow-Phone-6 {
            grid-row: 6;
        }
        .sapElisaRow-Phone-7 {
            grid-row: 7;
        }
        .sapElisaRow-Phone-8 {
            grid-row: 8;
        }
        .sapElisaRow-Phone-9 {
            grid-row: 9;
        }
        .sapElisaRow-Phone-10 {
            grid-row: 10;
        }
        .sapElisaRow-Phone-11 {
            grid-row: 11;
        }
        .sapElisaRow-Phone-12 {
            grid-row: 12;
        }
        .sapElisaCol-Phone-1 {
            grid-column-start: 1;
        }
        .sapElisaAttributeLength-Phone-1 {
            grid-column-end: span 1;
        }
        .sapElisaAttributeHidden-Phone {
            display: none;
        }
    }
}