ol.collection {
    margin: 0px;
    padding: 0px;
}

li {
    list-style: none;
}

* {
    box-sizing: border-box;
}

@media screen and (max-width: 736px) {
    .collection-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 20px;
    }

    .item {
        border: 1px solid gray;
        border-radius: 2px;
        padding: 10px;
    }

    .collection-container>li:first-child {
        display: none;
    }

    .attribute::before {
        content: attr(data-name);
    }

    .attribute {
        display: grid;
        grid-template-columns: minmax(9em, 30%) 1fr;
    }
}

@media screen and (max-width:580px) {
    .collection-container {
        display: grid;
        grid-template-columns: 1fr;
    }
}

@media screen and (min-width: 737px) {
    .item-container {
        display: grid;
        grid-template-columns: 2em 2fr 10em;
    }

    .attribute-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(var(--column-width-min), 1fr));
    }

    .information {
        --column-width-min: 12em;
    }

    .name-email {
        --column-width-min: 12em;
    }

    .phone-add {
        --column-width-min: 10em;
    }

    .edit-del {
        --column-width-min: 5em;
    }

    .attribute {
        border: 1px solid gray;
        padding: 2px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .item-container:hover {
        background-color: rgb(200, 227, 252);
    }

    .collection-container>.item-container:first-child .attribute {
        display: flex;
        align-items: center;
        justify-content: center;
        text-overflow: initial;
        overflow: auto;
        white-space: normal;
    }

    @media screen and (max-width: 736px) {
        .collection-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-gap: 20px;
        }
    }

    @media screen and (max-width:550px) {
        .collection-container {
            display: grid;
            grid-template-columns: 1fr;
        }
    }
}