/* ==========================================================================
   idealist. — celoten list za Cargo 3
   Zamenja obstoječi list v Site Settings → CSS/HTML → zavihek CSS.
   Označi vse staro, izbriši, prilepi to.

   Ohranjene so vse Cargove oznake v blokih data-css-preset — tiste s
   klicajem za poševnico. Te poganjajo Cargove vizualne nastavitve;
   če jih izbrišeš ali premakneš, drsniki v vmesniku nehajo delovati.

   Spremenjeno je troje: pisava, barve in tipografska lestvica.
   Diatype, Diatype Variable, Monument Grotesk Mono in Neue Haas Grotesk
   so povsod zamenjani z Ubuntujem. “Icons” ostaja v vsakem naboru —
   to je Cargova pisava za ikone in brez nje ikone izginejo.
   ========================================================================== */


/* --------------------------------------------------------------------------
   spremenljivke
   Vse barve in stopnje na enem mestu. Sprememba tu velja za vso stran.
   -------------------------------------------------------------------------- */

:root {
	--pisava: "Ubuntu", Icons, system-ui, sans-serif;

	--crna:   #1D1D1D;
	--siva:   #6E6E6E;
	--crta:   #E0E0E0;
	--papir:  #FFFFFF;
	--rumena: #FFD966;
	--modra:  #00308E;
	--siva-na-rumeni: #6B5A28;

	/* tipografska lestvica.
	   Če ti je bilo staro besedilo ljubše po velikosti, nastavi
	   --besedilo nazaj na 1.3rem; vrstični razmik 1,65 pa obdrži,
	   ker je bila prejšnja vrednost 1,2 za tekočo slovenščino pretesna. */
	/* tipografska gesta na domači strani.
	   Edina številka, ki jo nastavljaš, je --gesta. Ker je stopnja izražena
	   v vw, je razmerje med velikostjo črk in širino okna vedno enako:
	   gesta teče od roba do roba pri vsaki širini okna. Navodilo za
	   uravnavanje je pri pravilu za h1 spodaj. */
	--gesta:     6.2;
	--izjava:    calc(var(--gesta) * 1vw);

	/* mora se ujemati s .content_padding spodaj. Če ga v Cargovem vmesniku
	   spremeniš, spremeni tudi to vrednost, sicer gesta ne seže do roba. */
	--rob:       2rem;

	--naslov-1:  2.125rem;
	--naslov-2:  1.375rem;
	--naslov-3:  1.0625rem;
	--besedilo:  1.0625rem;
	--podatki:   0.875rem;

	--e1:  0.5rem;
	--e3:  1.5rem;
	--e6:  3rem;
	--e12: 6rem;

	--stolpec:   40rem;
	--stranski:  9rem;
	--presledek: 2.5rem;
}

#toolset {
	display: none;
}

body {
	background-color: var(--papir);
	color: var(--crna);
}

/* --------------------------------------------------------------------------
   povezave, povsod
   Prejšnja različica je barvala samo povezave znotraj “bodycopy”. Navigacija,
   naslovi in podnožje stojijo zunaj njega, zato so ostale privzeto brskalnikove:
   #0000EE in podčrtane. To pravilo zajame vse. Kar mora biti drugačno —
   meni na črni ploskvi, oznake sličic — je urejeno posebej niže.
   -------------------------------------------------------------------------- */

a {
	color: var(--modra);
	text-decoration: none;
}

a:hover {
	color: var(--crna);
}

a:active {
	opacity: 0.7;
}

/* --------------------------------------------------------------------------
   rumena kot poudarek
   Rumena nikoli ni ploskev in nikoli ni barva črk. Vedno stoji za besedilom,
   kot podloga posamezne besede: pod trenutno stranjo v navigaciji, pod
   naslovom sličice ob prehodu kazalca in pod označenim besedilom.
   Za povezave, gumbe in ozadja se ne uporablja.
   -------------------------------------------------------------------------- */

.page a.active,
a.active {
	opacity: 1;
	color: var(--crna);
	background: var(--rumena);
	box-shadow: 0 0 0 0.15em var(--rumena);
}

::selection {
	background: var(--rumena);
	color: var(--crna);
}

::-moz-selection {
	background: var(--rumena);
	color: var(--crna);
}

i,
em {
	font-style: italic;
}

b,
strong {
	font-weight: 700;
}

sub,
sup {
	position: relative;
	vertical-align: baseline;
}

sub {
	top: 0.3em;
}

sup {
	top: -0.4em;
}

s {
	text-decoration: line-through;
}

img {
	border: 0;
	padding: 0;
}

/* zamik seznamov je bil 4,5rem, kar je na 40rem širokem stolpcu preveč */
ul,
ol {
	margin: 0;
	padding: 0 0 0 1.5rem;
}

ol > li {
	padding-left: 0.75rem;
}

blockquote {
	margin: 0;
	padding: 0 0 0 2em;
}

hr {
	background: var(--crta);
	border: 0;
	height: 1px;
	display: block;
}

.content img {
	float: none;
	margin-bottom: 0rem;
	vertical-align: bottom;
}

.gallery_image_caption a {
	color: var(--siva);
}

.gallery_image_caption {
	margin-top: 1.0em;
	margin-bottom: 0.5rem;
	font-size: var(--podatki);
	font-weight: 400;
	color: var(--siva);
	font-family: var(--pisava);
	font-style: normal;
	line-height: 1.5;
	text-align: left;
}

/**
 * Loading Animation
 */

.loading[data-loading] {
	position: fixed;
	bottom: 8px;
	left: 8px;
}

/**
 * Editor styles
 *
 * Vloge: h1 nosi tipografsko gesto na domači strani, h2 naslove razdelkov,
 * h3 podnaslove, small podatkovne vrstice. Barva je v povezavah, ne v naslovih.
 */

[data-predefined-style="true"] bodycopy {
	font-size: var(--besedilo);
	font-weight: 300;
	color: var(--crna);
	font-family: var(--pisava);
	font-style: normal;
	line-height: 1.65;
}

/* največ 68 znakov v vrstici; če ti stolpec ni všeč, izbriši to pravilo */
[data-predefined-style="true"] bodycopy p {
	max-width: var(--stolpec);
}

/* povezave nosijo barvo, ne podčrtaja */

[data-predefined-style="true"] bodycopy a {
	color: var(--modra);
	text-decoration: none;
}

[data-predefined-style="true"] bodycopy a:hover {
	color: var(--crna);
	text-decoration: none;
}

bodycopy a.image-link,
bodycopy a.icon-link,
bodycopy a.image-link:hover,
bodycopy a.icon-link:hover {
	border-bottom: 0;
	padding-bottom: 0;
	text-decoration: none;
}

/* tipografska gesta.
   Negativna robova izničita .content_padding, zato blok sega do roba okna.
   Stopnja je v vw, zato se z oknom zmanjšuje in povečuje v istem razmerju.

   Uravnavanje: odpri domačo stran, poglej najdaljšo vrstico.
   Če se zalomi ali teče čez rob, zmanjšaj --gesta za 0,2.
   Če se ustavi pred desnim robom, povečaj za 0,2.
   Ko se najdaljša vrstica ravno dotakne obeh robov, je nastavljeno
   za vse širine okna hkrati. */

[data-predefined-style="true"] h1 {
	font-family: var(--pisava);
	font-style: normal;
	font-weight: 300;
	padding: 0;
	margin: 0;
	font-size: var(--izjava);
	line-height: 1.05;
	color: var(--crna);
	letter-spacing: -0.02em;
	hyphens: none;
	overflow-wrap: normal;
}

[data-predefined-style="true"] h1 a {
	color: var(--crna);
	text-decoration: none;
}

[data-predefined-style="true"] h1 a:hover {
	color: var(--modra);
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   meni
   Če je napis v meniju postavljen v slogu Heading 1, ga zgornje pravilo pusti
   črnega, ker je gesta na domači strani prav tako Heading 1 in mora ostati
   črna. Za tak primer okoli menija v Code View postavi
   <div class="meni">…</div>; to pravilo prevlada nad vsemi besedilnimi slogi.
   -------------------------------------------------------------------------- */

.meni a,
[data-predefined-style="true"] .meni a,
.meni bodycopy a {
	color: var(--modra);
	text-decoration: none;
}

.meni a:hover,
[data-predefined-style="true"] .meni a:hover,
.meni bodycopy a:hover {
	color: var(--crna);
}

[data-predefined-style="true"] h2 {
	font-family: var(--pisava);
	font-style: normal;
	font-weight: 700;
	padding: 0;
	margin: 0;
	color: var(--crna);
	font-size: var(--naslov-2);
	line-height: 1.3;
	letter-spacing: 0;
}

[data-predefined-style="true"] h2 a {
	color: var(--modra);
}

[data-predefined-style="true"] h2 a:hover {
	color: var(--crna);
}

[data-predefined-style="true"] h3 {
	font-family: var(--pisava);
	font-style: normal;
	font-weight: 700;
	padding: 0;
	margin: 0;
	color: var(--crna);
	font-size: var(--naslov-3);
	line-height: 1.65;
}

[data-predefined-style="true"] h3 a {
	color: var(--modra);
}

[data-predefined-style="true"] h3 a:hover {
	color: var(--crna);
}

[data-predefined-style="true"] small {
	display: inline-block;
	font-size: var(--podatki);
	line-height: 1.5;
	font-family: var(--pisava);
	font-style: normal;
	font-weight: 400;
	color: var(--siva);
}

[data-predefined-style="true"] small a {
	color: var(--modra);
	border-bottom-width: 0em;
}

[data-predefined-style="true"] small a:hover {
	color: var(--crna);
}

/**
 * Breakpoints
 */

[data-css-preset] .page {
    background-color: initial /*!page_bgcolor*/;
}

.mobile .page,
[data-css-preset].mobile .page {
	position: relative;
	min-height: 10px;
	max-width: 100%;
	width: 100%;
	background-color: transparent /*!page_bgcolor*/;
}

[data-css-preset] .container {
	margin-left: auto /*!content_right*/;
	margin-right: 0 /*!content_right*/;
	text-align: left /*!text_left*/;
}

[data-css-preset] body {
	background-color: transparent /*!body_bgcolor*/;
}

[data-css-preset] .container_width {
	width: 100%/*!content_right*/;
}

[data-css-preset] .content_padding {
	padding-top: 1rem /*!main_margin*/;
	padding-bottom: 1rem /*!main_margin*/;
	padding-left: 1rem /*!main_margin*/;
	padding-right: 1rem /*!main_margin*/;
}

[data-css-preset] .backdrop {
	width: 100% /*!background_cover*/;
}

/**
 * Thumbnails
 */

div[thumbnails] {
	justify-content: flex-start;
}

[data-css-preset] .thumbnails {
   	background-color: transparent/*!thumbnails_bgcolor*/;   
}

[data-css-preset] .thumbnails_width {
    width: 100%/*!thumbnails_width*/;
}

[data-css-preset] [thumbnails-pad] {
    padding: 0.5rem/*!thumbnails_padding*/;
}

[data-css-preset] [thumbnails-gutter] {
    margin: -1rem/*!thumbnails_padding*/;
}

[data-css-preset] [responsive-layout] [thumbnails-pad] {
    padding: 0.25rem/*!responsive_thumbnails_padding*/; 
}

[data-css-preset] [responsive-layout] [thumbnails-gutter] {
    margin: -0.5rem/*!responsive_thumbnails_padding*/; 
}

.thumbnails .thumb_image {
	outline: 0px solid rgba(0, 0, 0, 0.12);
	outline-offset: -1px;
}

.thumbnails .title {
	margin-top: 1.0rem;
	margin-bottom: 0.4rem;
	font-size: var(--naslov-3);
	font-weight: 700;
	color: var(--crna);
	font-family: var(--pisava);
	font-style: normal;
	line-height: 1.4;
}

.thumbnails .tags {
	margin-top: .8rem;
	margin-bottom: 1.5rem;
	font-size: var(--podatki);
	line-height: 1.5;
	font-family: var(--pisava);
	font-style: normal;
	font-weight: 400;
	color: var(--siva);
}

.thumbnails .tags a {
	border-bottom: 0;
	color: var(--siva);
	text-decoration: none;
}

.thumbnails .has_title .tags {
	margin-top: 0rem;
}

/* naslov sličice je povezava; ostane črn, ker celotna sličica že je povezava.
   Rumena ploskev se pokaže ob prehodu kazalca. */

.thumbnails .title a {
	color: var(--crna);
}

.thumbnails a:hover .title,
.thumbnails .title a:hover {
	color: var(--crna);
	background: var(--rumena);
	box-shadow: 0 0 0 0.15em var(--rumena);
}

/**
 * Site Menu Button
 */

[data-css-preset] #site_menu_button {
	color: var(--crna);
	font-size: 26px /*!site_menu_button*/;
	padding: 6px;
	line-height: 1;
	background: rgba(33, 32, 46, 0);
	position: fixed;
	top: 1.0rem /*!site_menu_button*/;
	right: 1.2rem /*!site_menu_button*/;
}

body.mobile #site_menu_button {
	margin: -6px;
	font-size: 30px;
}

#site_menu_button.custom_icon {
	width: 40px;
	height: auto;
}

#site_menu_button.active {
	display: none;
}

/**
 * Site Menu
 *
 * Črna ploskev. Besedilo je na njej Regular, ne Light —
 * na temni podlagi se teža dvigne za eno stopnjo.
 */

#site_menu {
	font-family: var(--pisava);
	background: rgba(29, 29, 29, 0.97);
	font-size: 1.0625rem;
	font-style: normal;
	font-weight: 400;
	padding: 20px 30px 90px 30px;
	max-width: 400px;
	min-width: 300px;
	text-align: left;
	display: flex;
	justify-content: flex-start;
}

body.mobile #site_menu {
	width: 100%;
}

#site_menu .page-link a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
}

#site_menu .set-link > a {
	color: rgba(255, 255, 255, 0.85);
	font-weight: 700;
	text-decoration: none;
}

#site_menu a:active {
	opacity: .7;
}

#site_menu a.active {
	opacity: 1;
	color: var(--crna);
	background: var(--rumena);
	box-shadow: 0 0 0 0.15em var(--rumena);
}

#site_menu a:hover {
	color: rgba(255, 255, 255, 1);
}

#site_menu .close {
	display: none;
	color: rgba(255, 255, 255, 0.4);
	line-height: .85em;
	font-size: 45px;
}

body.mobile #site_menu .close {
	display: block;
	font-size: 50px;
	line-height: 1em;
}

#site_menu .break {
	height: 28px;
}

#site_menu .indent {
	margin-left: 28px;
}

/**
 * Shop Button
 */

[data-css-preset] #shop_button {
	color: var(--crna);
    background: transparent;
	font-size: 32px;
    font-style: normal;
	font-weight: 400;
    line-height: 1.;
    position: fixed;
	padding: 6px;
	bottom: 3rem /*!shop_button*/;
	right: 3rem /*!shop_button*/;
}

#shop_button.text {
	font-family: var(--pisava);
	font-size: var(--podatki);
	padding: 0;
	font-weight: 700;
	color: var(--crna);
	font-style: normal;
	line-height: 1.4;
	letter-spacing: 0;
}

#shop_button.custom_icon {
	width: 40px;
    height: auto;
}

body.mobile #shop_button:not(.text) {
	margin: -6px;
    font-size: 36px;
}

/**
 * Shop Product Widget
 */

.shop_product {
    width: 100%;
	max-width: 22rem;
    position: relative;
    display: block;
}

.shop_product .price {
	font-family: var(--pisava);
	font-style: normal;
	font-weight: 400;
	margin-bottom: 1rem;
	font-size: var(--podatki);
	line-height: 1.5;
	color: var(--crna);
}

.shop_product .dropdown {
	font-family: var(--pisava);
	font-size: var(--podatki);
	display: inline-block;
	width: 100%;
	border: 1px solid var(--crta);
	border-radius: 0;
	background: white url(https://static.cargo.site/assets/images/select-line-arrows.svg) no-repeat right .25rem top 0;
	margin-bottom: 1rem;
	line-height: 1.2;
	padding: 0.7rem 2.5rem 0.8rem 1rem;
	font-style: normal;
	font-weight: 400;
	color: var(--crna);
}

.shop_product .button {
	font-family: var(--pisava);
	font-size: var(--podatki);
	background: var(--crna);
	border-radius: 0;
	color: var(--papir);
	flex: 0 0 50%;
	text-align: left;
	display: inline-block;
	line-height: 1;
	padding: .8rem 1.25rem;
	font-style: normal;
	font-weight: 400;
	text-decoration: none;
}

/**
 * Image Zoom
 */

.content img.image-zoom:active {
    opacity: .7;
}

/**
 * Quick View
 */

[data-css-preset] .quick-view {
    padding-top: 2.5rem /*!quick_view_padding*/;
    padding-bottom: 2.5rem /*!quick_view_padding*/;
    padding-left: 2.5rem /*!quick_view_padding*/;
    padding-right: 2.5rem /*!quick_view_padding*/;
    height: 100% /*!quick_view_height*/;
    width: 100% /*!quick_view_width*/;
}

body.mobile .quick-view {
    width: 100%;
    height: 100%;
    margin: 0;
}

[data-css-preset] .quick-view-background {
	background: rgba(255, 255, 255, 1) /*!quick_view_bgcolor*/;
}

.quick-view-caption {
	font-family: var(--pisava);
	transition: 100ms opacity ease-in-out;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 3.5rem 0;
	text-align: center;
	font-size: var(--podatki);
	font-style: normal;
	font-weight: 400;
}

.quick-view-caption span {
	padding: 0.5rem 1rem;
	display: inline-block;
	background: rgba(29, 29, 29, 0.85);
	color: white;
}

/**
 * Quick View Navigation 
 */

.quick-view-navigation .left-arrow {
    left: 10px;
}

.quick-view-navigation .right-arrow {
    right: 10px;
}

.quick-view-navigation .left-arrow,
.quick-view-navigation .right-arrow {
    /* Change height/width together to scale */
    height: 36px;
    width: 36px;
}

.quick-view-navigation .left-arrow .inner-color,
.quick-view-navigation .right-arrow .inner-color {
    stroke: #fff;
    stroke-width: 0px;
}

.quick-view-navigation .left-arrow .outer-color,
.quick-view-navigation .right-arrow .outer-color {
    stroke: #1D1D1D;
    stroke-width: 2px;
}

.quick-view-navigation .close-button {  
    top: 10px;
    right: 10px;
    /* Change height/width together to scale */
    width: 36px;
    height: 36px;
}

.quick-view-navigation .close-button .inner-color {
    stroke: #fff;
    stroke-width: 0px;
}

.quick-view-navigation .close-button .outer-color {
    stroke: #1D1D1D;
    stroke-width: 2px;
}

/** 
 * Image Gallery Navigation Arrows 
 */
 
.image-gallery-navigation .left-arrow,
.image-gallery-navigation .right-arrow {
    /* Change height/width together to scale */
    height: 36px;
    width: 36px;
}

.image-gallery-navigation .left-arrow .inner-color,
.image-gallery-navigation .right-arrow .inner-color {
    stroke: rgba(255, 255, 255, 1);
    stroke-width: 2px;
}

.image-gallery-navigation .left-arrow .outer-color,
.image-gallery-navigation .right-arrow .outer-color {
    stroke: rgba(29, 29, 29, 0.6);
    stroke-width: 3px;
}

/**
 * Wallpaper Backdrop Navigation Arrows 
 */

.wallpaper-navigation .left-arrow,
.wallpaper-navigation .right-arrow {
   /* Change height/width together to scale */
   width: 36px;
   height: 36px;
}

.wallpaper-navigation .left-arrow .inner-color,
.wallpaper-navigation .right-arrow .inner-color {
   stroke: #fff;
   stroke-width: 2px;
}

.wallpaper-navigation .left-arrow .outer-color,
.wallpaper-navigation .right-arrow .outer-color {
    stroke: rgba(29, 29, 29, 0.6);
    stroke-width: 3px;
}

/**
 * Feed
 */

.feed .content_container .page {
    border-top: 0px dashed var(--crta);
}

.feed .content_container .page_container:first-child .page {
	border-top: 0;
}

/**
 * Audio Player
 */

.audio-player {
	max-width: 26rem;
	height: 3.3rem;
	outline: 1px solid var(--crta);
	color: var(--crna);
	background: transparent;
	font-size: var(--podatki);
	line-height: 1.5;
	font-family: var(--pisava);
	font-style: normal;
	font-weight: 400;
	text-align: left;
	margin: 1px 1px 1em 1px;
}

body.mobile .audio-player {
    max-width: 100%;
}

.audio-player .separator {
	width: 1px;
	background-color: var(--crta);
}

.audio-player .button {
    background: transparent;
    cursor: pointer;
    fill: rgba(29, 29, 29, 0.9);
}

.audio-player .icon {
    fill: rgba(29, 29, 29, 0.9);
    padding: 30%;
    width: 100%;
    margin: auto;
}

.audio-player .buffer {
    background: rgba(29, 29, 29, 0.1);
}

.audio-player .progress {
    background: rgba(29, 29, 29, 0.2);
}

.audio-player .progress-indicator {
    border: 1px solid rgba(29, 29, 29, 0.7);
    width: 1px;
    height: 100%;
    right: 0;
    position: absolute;
    cursor: ew-resize;
}

.audio-player .note-icon {
    height: 100%;
    width: 3.8rem;
    padding: 1rem;
    fill: rgba(29, 29, 29, 0.75);
}

.audio-player .current-time {
    padding-left: 1rem;
}

.audio-player .total-time {
    padding-right: 1rem;
}

/* ==========================================================================
   idealist. — dodatki
   Ti razredi sami po sebi ne naredijo nič. Uporabijo se tako, da v
   Code View strani okoli vsebine postaviš <div class="…">…</div>.
   ========================================================================== */

/* stranski stolpec: oznaka levo, vsebina desno.
   <div class="razdelek"><div class="oznaka">01</div><div>…</div></div> */

.razdelek {
	display: grid;
	grid-template-columns: var(--stranski) minmax(0, var(--stolpec));
	gap: var(--presledek);
	margin-bottom: var(--e12);
	align-items: start;
}

.oznaka {
	font-family: var(--pisava);
	font-weight: 700;
	font-size: var(--podatki);
	line-height: 1.5;
	color: var(--crna);
}

@media (max-width: 736px) {
	.razdelek {
		grid-template-columns: 1fr;
		gap: var(--e1);
	}
}

/* rumeni poudarek.
   Rumena ni več ploskev, ampak podloga posamezne besede ali besedne zveze,
   kot bi jo označil z markerjem. Podlaga strani je vedno bela.
   Uporaba: <span class="hl">označena beseda</span>
   Rumena ni barva gumbov in ne barva povezav. */

.hl {
	background: var(--rumena);
	padding: 0.02em 0.12em;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

/* glavno sporočilo — naslovnica, ločilni naslov — nosi modra, ne črna */

.naslov-nosilni {
	font-family: var(--pisava);
	font-weight: 700;
	color: var(--modra);
}

/* naslov strani.
   h1 nosi tipografsko gesto, zato za običajni naslov strani
   uporabi ta razred: <div class="naslov-strani">Storitve.</div> */

.naslov-strani {
	font-family: var(--pisava);
	font-weight: 700;
	font-size: var(--naslov-1);
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var(--crna);
	margin: 0 0 var(--e3) 0;
}

/* uvodni odstavek.
   Večji, sivi odstavek pod naslovom strani — za kratek uvod pred seznamom
   ali razdelkom.
   <div class="uvod">…</div> */

.uvod {
	font-family: var(--pisava);
	font-weight: 300;
	font-size: var(--besedilo);
	line-height: 1.5;
	color: var(--siva);
	max-width: var(--stolpec);
	margin: 0 0 var(--e6) 0;
}

/* podatkovna vrstica */

.podatki {
	font-family: var(--pisava);
	font-weight: 400;
	font-size: var(--podatki);
	line-height: 1.5;
	color: var(--siva);
}

/* tabele */

bodycopy table {
	border-collapse: collapse;
	width: 100%;
	max-width: var(--stolpec);
	font-weight: 400;
	font-size: var(--podatki);
	line-height: 1.5;
}

bodycopy th {
	text-align: left;
	font-weight: 700;
	border-bottom: 1px solid var(--crna);
	padding: 0 var(--e3) var(--e1) 0;
}

bodycopy td {
	border-bottom: 1px solid var(--crta);
	padding: var(--e1) var(--e3) var(--e1) 0;
	vertical-align: top;
}

/* seznam projektov (podstran "projekti.").
   Vsaka vrstica je ena povezava na projektno stran: letnica v stranskem
   stolpcu (uporabi kar .oznaka), naslov in kratek opis v glavnem.
   Iste mere kot .razdelek zgoraj, zato je vizualno usklajen z ostalimi
   stranmi. Hover na naslovu je isti rumeni marker kot pri sličicah
   (.thumbnails .title a:hover) — ne modra.

   <div class="projekti-seznam">
     <a class="projekti-vrstica" href="…">
       <div class="oznaka">2019–2022</div>
       <div>
         <span class="projekti-naslov">ELES 3000</span>
         <span class="projekti-opis">— umetnost in javno zaupanje …</span>
       </div>
     </a>
     … (ponovi vrstico za vsak projekt)
   </div> */

.projekti-seznam {
	border-top: 1px solid var(--crta);
}

.projekti-vrstica {
	display: grid;
	grid-template-columns: var(--stranski) minmax(0, 1fr);
	gap: var(--presledek);
	align-items: baseline;
	padding: 1.375rem 0;
	border-bottom: 1px solid var(--crta);
	text-decoration: none;
	color: inherit;
}

.projekti-naslov {
	font-family: var(--pisava);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--crna);
}

.projekti-opis {
	font-family: var(--pisava);
	font-weight: 300;
	font-size: var(--besedilo);
	color: var(--siva);
}

.projekti-vrstica:hover .projekti-naslov {
	color: var(--crna);
	background: var(--rumena);
	box-shadow: 0 0 0 0.15em var(--rumena);
}

@media (max-width: 736px) {
	.projekti-vrstica {
		grid-template-columns: 1fr;
		gap: var(--e1);
	}
}
/* največja širina podstrani.
   Nad 75rem (1200 px) se vsebina ne razteguje več.
   Razred .vstopna doda na element <html> skripta v zavihku HTML;
   na domači strani prekliče omejitev. */

.container_width {
	max-width: 75rem;
	margin-left: auto;
	margin-right: auto;
}

.vstopna .container_width {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

.vstopna [data-predefined-style="true"] h1 {
	margin: 0 calc(-1 * var(--rob));
}