@layer blocks {
	
	.blkLogos {
		margin-bottom: 4em;
	}
	
	.blkLogos h2 {
		color: var(--color__black);
	}

	/* Logotipi v mreži brez črt, poravnani levo (logotip je v svojem okvirju na levem robu). */
	.wLogos {
		--logos__cols: 2;
		--logos__w: 11.5rem;
		--logos__h: 4.5rem;

		display: grid;
		grid-template-columns: repeat(var(--logos__cols), minmax(0, 1fr));
		gap: var(--spacing5) var(--spacing6);
	}

	.wLogos__logo {
		display: flex;
		align-items: center;
		min-width: 0;
	}

	.wLogos__image {
		display: block;
		width: 100%;
		max-width: var(--logos__w);
		height: var(--logos__h);
	}

	.wLogos__image img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: left center;

		filter: grayscale(1);
		opacity: 0.8;

		transition:
			filter .3s,
			opacity .3s;
	}

	a.wLogos__image:hover img,
	a.wLogos__image:focus-visible img {
		filter: none;
		opacity: 1;
	}

	/* barvni logotipi (nastavitev bloka): prikazani taki, kot so naloženi */
	.blkLogos--color .wLogos__image img {
		filter: none;
		opacity: 1;
	}

	@media (min-width: 48em) {
		.wLogos {
			--logos__cols: 3;
			--logos__h: 6rem;
		}
	}

	/* Od tu je korenska pisava večja, zato je okvir logotipa v rem manjši. */
	@media (min-width: 65em) {
		.wLogos {
			--logos__cols: 4;
			--logos__w: 8.5rem;
			--logos__h: 4.5rem;
		}
	}

	@media (min-width: 80em) {
		.wLogos {
			--logos__cols: 5;
			--logos__w: 7.5rem;
		}
	}

	/*
		Večji sponzorji: večji logotipi, 1 / 2 / 3 v vrsti.
		Pravila so pod pravili za mrežo, da pri enaki specifičnosti prevladajo.
	*/
	.wLogos--large {
		--logos__cols: 1;
		--logos__w: 12rem;
		--logos__h: 5rem;
	}

	.wLogos--large + .wLogos {
		margin-top: var(--spacing5);
	}

	@media (max-width: 36em) {
		
		.wLogos--large {
			--logos__cols: 2;
		}
	}
	
	@media (min-width: 36em) {
		.wLogos--large {
			--logos__cols: 2;
		}
	}

	@media (min-width: 48em) {
		.wLogos--large {
			--logos__cols: 3;
			--logos__w: 13rem;
			--logos__h: 6rem;
		}
	}

	@media (min-width: 65em) {
		.wLogos--large {
			--logos__w: 12rem;
		}
	}
}
