.modals {
	display: grid;
	grid-gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
	width: 100%;
	place-items: center;
	justify-items: center;
}

.server {
	color: var(--clr-neutral-800);
	font-size: 1rem;
	border-radius: 0.5rem;
	border: 1px solid var(--clr-neutral-400);
	padding: 2rem;
	text-align: center;
	background-color: var(--clr-neutral-100);
	cursor: pointer;
	text-decoration: none;
	display: flex;
	width: 95%;
	height: 100%;
	align-items: center;
	justify-content: center;
}

.server:hover {
	border: 1px solid var(--clr-neutral-800);
	box-shadow: var(--shadow-hover);
}

a.server-link {
	display: flex;
}
a.server-link:hover {
	background-color: inherit;
}

.open-button:focus,
.open-button:active {
	box-shadow: var(--shadow-focus);
	outline: 2px solid var(--clr-accent-400);
	border: transparent;
}

.close-button {
	background-color: white;
	border: none;
	padding: 0;
}

.modal {
	border-radius: 0.5rem;
	border: 1px solid var(--clr-neutral-400);

	box-shadow: var(--shadow);

	background-color: var(--clr-neutral-100);

	max-width: 70vmin;
}

.modal-content {
	color: var(--clr-neutral-900);
	padding: 0 0.5rem 1.5rem;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
}

li {
	margin-left: 1.5rem;
}

::backdrop {
	background-color: #000;
	opacity: 0.8;
}
svg {
	height: 1.5rem;
	width: fit-content;
}

.server-logo {
	display: flex;
	justify-content: center;
	margin-bottom: 1.5rem;
	margin-top: 1.5rem;
}

.server-svg {
	width: clamp(22ch, 20%, 46ch);
	height: unset;
}

.modal-svg {
	width: 100%;
}