strona-czynna/src/back/jdd-components/ordered-pictogram-tiles/ordered-pictogram-tiles.css

.pictogram-tiles {
	max-width: var(--container-width);
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-column-gap: 2rem;
	grid-auto-rows: minmax(7rem, auto);
	grid-row-gap: 1rem;
	margin: 1rem auto;
	padding: 0 1rem;
}

.pictogram-tiles__tile {
	grid-row: span 2;
	list-style: none;
}

.pictogram-tiles__tile:nth-child(even) {
	grid-column: 1;
}

.pictogram-tiles__tile:nth-child(odd) {
	grid-column: 2;
}

.pictogram-tiles__tile:only-child {
	grid-column: 1 / span 2;
	max-width: 23rem;
	margin: 0 auto;
}

.pictogram-tiles__content {
	padding: 2rem;
}

.pictogram-tiles__upperSection {
	display: flex;
	justify-content: space-between;
}

.pictogram-tiles__upperSection span {
	font-family: var(--font-sans-serif);
	font-weight: 800;
	font-size: 1.5rem;
	height: fit-content;
	padding-bottom: 1rem;
	position: relative;
}

.pictogram-tiles__upperSection span::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: #000000;
	opacity: 25%;
}

.pictogram-tiles__upperSection img {
	align-self: flex-start;
}

.pictogram-tiles__tile--accent a {
	color: var(--color-brand-text-on-accent);
}

.pictogram-tiles__tile--accent2 a {
	color: var(--color-brand-text-on-accent2);
}

.pictogram-tiles__tile--white a {
	color: var(--color-brand-text-accent);
}

.pictogram-tiles__lowerSection h3 {
	grid-row: 1;
	font-size: 1rem;
	line-height: 1.25rem;
	font-family: var(--font-headings);
	font-weight: 400;
	align-self: center;
}

.pictogram-tiles__lowerSection p {
	grid-row: 2;
	font-family: var(--font-short-text);
	color: var(--dove-gray);
}

.pictogram-tiles__tile--accent {
	background-color: var(--color-brand-accent);
}

.pictogram-tiles__tile--accent2 {
	background-color: var(--color-brand-accent2);
}

.pictogram-tiles__tile--white {
	background-color: white;
	box-shadow: 0.5rem 0.5rem 0 0 rgba(0, 0, 0, 0.06);
}

.pictogram-tiles__tile--accent .pictogram-tiles__upperSection span {
	color: var(--color-brand-text-on-accent);
	border-color: hsl(287.3, 13.1%, 50.8%);
}

.pictogram-tiles__tile--accent2 .pictogram-tiles__upperSection span {
	color: var(--color-brand-text-on-accent2);
	border-color: hsl(287.3, 13.1%, 50.8%);
}

.pictogram-tiles__tile--white .pictogram-tiles__upperSection span {
	color: var(--color-brand-text-accent);
	border-color: #e0e0e0;
}

.pictogram-tiles__tile--accent .pictogram-tiles__lowerSection h3 {
	color: var(--color-brand-text-on-accent);
}

.pictogram-tiles__tile--accent2 .pictogram-tiles__lowerSection h3 {
	color: var(--color-brand-text-on-accent2);
}

.pictogram-tiles__tile--accent .pictogram-tiles__lowerSection p {
	color: var(--color-brand-text-on-accent);
}

.pictogram-tiles__tile--accent2 .pictogram-tiles__lowerSection p {
	color: var(--color-brand-text-on-accent2);
}

.pictogram-tiles__tile--white .pictogram-tiles__lowerSection {
	.pictogram-tiles__tile--white .pictogram-tiles__lowerSection p {
		color: var(--color-basic-gray-04);
	}
}

@container (max-width: 880px) {
	.pictogram-tiles {
		display: block;
		grid-template-columns: auto;
	}

	.pictogram-tiles__tile {
		max-width: 21rem;
		margin: 0 auto;
	}

	.pictogram-tiles__tile:nth-child(odd) {
		grid-column: auto;
	}

	.pictogram-tiles__tile:nth-child(even) {
		grid-column: auto;
	}
}

@container (max-width: 440px) {
	.pictogram-tiles {
		padding: 0;
	}

	.pictogram-tiles__content {
		padding: 2rem 1rem;
	}

	.pictogram-tiles__tile--white {
		box-shadow: none;
	}
}