Шаблон:LinkCard/styles.css

.link-card {
	--background-color: color-mix(in srgb, var(--bg-color) var(--alpha), rgb(var(--theme-color-darkened--rgb)));

	display: inline-block;
	position: relative;
	min-width: 110px;
	text-align: center;
	border: var(--border-outset);
	border-radius: 0.3em;
	box-shadow: var(--box-shadow-medium);
	background: var(--background-color);
	transition: all 0.15s ease;
	min-height: calc(32px + 4px);
}

.link-card__image {
	position: relative;
	text-align: center;
	align-content: center;
	padding: 6px;
}

.link-card__name {
	position: relative;
	width: 100%;
	padding: 2px 4px;
	font-size: 0.8em;
	box-sizing: border-box;
	background: rgba(0, 0, 0, 0.2);
	font-weight: bold;
}

.link-card.brightness-overlay::before {
	border-radius: 0.3em;
}

.link-card__pin {
	top: 0;
	right: 4px;
}

@media (min-width: 800px) {
	.link-card-hover:not(.link-card__side):hover  {
		box-shadow: var(--box-shadow-high);
		transform: translateY(-4px);
	}
}

@media (max-width: 800px) {
	.link-card {
		display: flex;
		width: 100%;
		text-align: left;
		justify-content: center;
		box-shadow: var(--box-shadow);
		min-width: 0;
	}

	.link-card__name {
		background: rgba(0, 0, 0, 0.15);
		padding: 4px 8px;
		font-size: 0.9em;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: nowrap;
	}

	.link-card__image {
		padding: 4px;
		width: 32px;
	}
}

.link-card__side {
	display: flex ;
	width: 100%;
	text-align: left;
	justify-content: center;
	box-shadow: var(--box-shadow);
}

.link-card__side .link-card__name {
	background: rgba(0, 0, 0, 0.15);
	padding: 4px 8px;
	font-size: 0.9em;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
}

.link-card__side .link-card__image {
	padding: 4px;
	width: 32px;
}

.link-card__side img {
	width: 32px; 
	height: 32px; 
}