.kafelek, .pasek {
	box-sizing: border-box;
	padding: 0.75rem;
	display: flex;
}

.kafelek {
	flex-direction: column;
	margin-bottom: 1rem;
	width: 25%;
}

.pasek {
	flex-direction: row;
	width: 100%;
	box-shadow: 0 0 0.5rem #ccc;
	border-radius: 1rem;
}

.kafelek .obrazek {
	width: 100%;
	box-sizing: border-box;
}

.pasek .obrazek {
	min-width: 20rem;
	width: 20rem;
	align-self: center;
}

.kafelek > a:hover .obrazek {
	opacity: 0.75;
	box-shadow: inset 0 0 3rem white;
}

.kafelek > a {
	position: relative;		/*po to, aby darmowy mogło mieć absolute */
}

.kafelek.polecany .obrazek{
	border: 3px solid var(--buttoncolor)
}

.kafelek.polecany a img#polecany {
	position: absolute;
	top: 0;
	left: 0;
	max-width: 80%;
	max-height: 90%;
	opacity: 0.6;
	filter: grayscale(1);
}

.kafelek.polecany a:hover img#polecany {
	opacity: 1;
	filter: none;
}

.kafelek .autor_obrazek {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background-size: contain;
	float: left;
	margin: 0.8rem;
	margin-left: 0;	
}

.kafelek .nazwa {
	color: #333;
	margin-top: -3.5rem;
	margin-left: 3rem;
	font-weight: bold;
	letter-spacing: 0.02rem;
	font-size: 1.1rem;
}

.kafelek .autor {
	margin-top: 0.3rem;
	margin-left: 3rem;
	color: #666;
}

@media screen and (max-width: 1024px) {
	.kafelek {
		width: 33.3%;
	}
}

@media screen and (max-width: 900px) {
	.pasek {
		 flex-wrap: wrap;
	}
}

@media screen and (max-width: 512px) {
	.kafelek {
		width: 50%;
	}
}

/**************************************** Kreator ******************************************/
.kafelek > a .edycja {
	position: absolute;
	bottom: 0.3rem;
	right: 0;
	max-width: 40%;
	max-height: 45%;
	opacity: 0.8;
}

.kafelek > a:hover .edycja {
	opacity: 1;
}