html, body { margin: 0; padding: 0; height: 100%; background-color: #d7e6fc; color: #000; font-family: Arial, sans-serif; }
		main { 
			margin: 0 auto; max-width: 100%; height: 100vh; max-height: 100%; 
			background-image: url('/img/ai-min.svg'); background-repeat: no-repeat; background-size: contain; background-position-x: center; background-position-y: center;
		}
		h1 { background-color: #073270; color: #FFF; margin: 0 0 1rem 0;
  padding: 1rem; }

		ul[class] {
    margin: 0;
    padding: 0;
}

ul[class] li {
    list-style: none; display: block; position: relative; border-radius: 0.33em; border: 1px solid #073270;
}

ul[class] li button.close { position: absolute;
  top: 0;
  right: 0;
border: 1px solid #073270;
  border-radius: 3px;
  color: #073270;
  background-color: #d7e6fc;
  font-weight: bold;
}

.btn-grid.is-selected {
	border-radius: 0.33rem 0.33rem 0 0;
	border-bottom: 1px solid #FFF;
	padding-bottom: 1rem;
	z-index: 99;
}


ul[class] li > * {
    margin: 1rem;
}

li:focus {
    box-shadow: 0 0 0 0.25rem #073270;
    outline: 0;
}

/* [1] 'auto-fit' grid columns, so no media queries required. */
/* [2] 'dense' packing fills in holes earlier in the grid. */
.grid {
    display: grid;
    gap: 1rem;
    grid-auto-flow: dense; /* [2] */
    grid-template-columns: repeat(auto-fit, 6rem); /* [1] 20rem */
    justify-content: center;
}

.grid > * {
    align-items: flex-start;
    background: #eee;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* [3] Make fullwidth card span all grid columns. */
.fullwidth {
    grid-column: 1 / -1;
}

ul[class] li.is-hidden {
    display: none;
}

.fullwidth,
.is-selected {
    background: #FFF;
}

@media only screen and (min-width: 480px) {

.grid {
    grid-template-columns: repeat(auto-fit, 12rem); /* [1] 20rem */
}
}

@media only screen and (min-width: 800px) {
main { width: 75%;
    max-width: 800px; }
}