ol.collection {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

/* 2 Column Card Layout */
@media screen and (max-width: 736px) {
    .collection-container {
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-gap: 10px;
    }

    .item {
               padding: 10px;
    }

    /* Don't display the first item, since it is used to display the header for tabular layouts*/
    .collection-container>li:first-child {
        display: none;
    }

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

    /* Attribute name for first column, and attribute value for second column. */
    .attribute {
        display: grid;
        grid-template-columns: minmax(9em, 30%) 1fr;
    }
}

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

/* Tabular Layout 737*/
@media screen and (min-width: 737px) {
    /* The maximum column width, that can wrap */
    .item-container {
        display: grid;
        grid-template-columns:  1fr 2fr 3fr 3fr 3fr ;
    }

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



    /* In order to maximize row lines, only display one line for a cell */
    .attribute {
        padding: 2px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
	.collection-container>.item-container:nth-child(even){
		background-color: #d5d5d5
		}
    .collection-container>.item-container:first-child {
        background-color: darkred;
        Color: white;
    }
/*
    .item-container:hover {
        background-color: rgb(200, 227, 252);
    }
*/
    /* header labels */
    .collection-container>.item-container:first-child .attribute {
        display: flex;
        text-overflow: initial;
        overflow: auto;
        white-space: normal;
    }
}

/*Column Layout */
@media screen and (min-width: 737px) {
	.col {
		max-width: 98%;
		Display: block;
		grid-template-columns: 1fr;
		grid-gap: 1px;
		background-color: #d5d5d5;
		padding: 5px;
		
}
	h3.h3col {
	background-color: darkred;
	color: white;
	text-align: center;
}
    .col2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 20px;
    }
    

    .col3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 10px;
    }

    .col4 {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 5px;
    }