Шаблон:Prototype/technology/wrapper/styles.css

.ts-Prototype-technology {
    display: grid;
    grid-template-rows: 0fr 0fr;
    grid-template-columns: 0fr;
    background: var(--theme-bg-color-250);
    font-size: var(--font-size-xs);
    padding: 10px;
    border-top: 10px solid silver;
    box-shadow: var(--box-shadow-medium);
    border-radius: var(--border-radius-medium);
}

.ts-Prototype-technology__images {
	grid-row: 1 / 3;
	margin-right: 14px;
}

.ts-Prototype-technology__name {
	display: flex;
	justify-content: space-between;
	font-weight: bold;
	font-size: var(--font-size-s);
	border-bottom: 2px solid var(--border-color-hr);
	padding-bottom: 6px;
}

.ts-Prototype-technology__type {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0 5px;
	margin-top: 6px;
}

.ts-Prototype-technology__technologies {
	display: grid;
	grid-column: 1 / 3;
	grid-template-rows: 0fr 0fr;
	gap: 6px;
	margin-top: 10px;
}

.ts-Prototype-technology__technologies ul {
	margin: 4px 0 0 0;
}

.ts-Prototype-technology__technologies li::before {
	content: "-"; 
	margin-right: 4px;
	color: var(--text-color-yellow);
}

.ts-Prototype-technology__technologies li {
	list-style-type: none;
}

.ts-Prototype-technology__technologies-unblocks li {
	color: var(--text-color-yellow);
}

.ts-Prototype-technology-group{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 12px;
}

@media (max-width: 800px) {
	.ts-Prototype-technology-group {
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	}
}

#Arsenal.ts-Prototype-technology {
	border-top-color: #b82e31;
}
#Industrial.ts-Prototype-technology {
	border-top-color: #b88528;
}
#Experimental.ts-Prototype-technology {
	border-top-color: #7755ba;
}
#CivilianServices.ts-Prototype-technology {
	border-top-color: #5d9735;
}

#Arsenal .ts-Prototype-technology__technology {
	color: var(--text-color-red);
}
#Industrial .ts-Prototype-technology__technology {
	color: var(--text-color-orange);
}
#Experimental .ts-Prototype-technology__technology {
	color: var(--text-color-violet);
}
#CivilianServices .ts-Prototype-technology__technology {
	color: var(--text-color-lime);
}