strona-czynna/src/back/jdd-components/dynamic-grid-v2/dynamic-grid-v2.css

.dynamic-grid {
	container-type: inline-size;

	&.dynamic-grid--bleed-bleed {
		grid-column: bleed !important;
	}

	&.dynamic-grid--bleed-screen {
		grid-column: screen !important;
	}

	.dynamic-grid-title {
		text-align: center;
		margin-top: 0;
	}

	.tiles-container {
		display: grid;
		grid-gap: 24px;
		grid-template-columns: repeat(3, 1fr);
		grid-auto-rows: min-content;
		grid-auto-flow: row dense;

		@container (min-width: 900px) {
			grid-template-columns: repeat(4, 1fr);
		}

		.tile {
			overflow: hidden;
			display: grid;
			gap: 0;

			grid-template-columns: subgrid;
			grid-template-rows: subgrid;

			color: var(--color-brand-text-fg);
			text-decoration: none;

			.tile-content {
				grid-row: 2/3;
				background-color: var(--tile-bg-color);
				color: var(--tile-fg-color);
				width: 100%;
				padding: 16px;
				z-index: 1;
				overflow: hidden;
				bottom: 0;
				box-sizing: border-box;

				.tile-content-wrapper {
					display: flex;
					flex-flow: column;
					gap: 16px;

					.tile-title {
						font-weight: bold;
						line-height: 20px;
						margin: 0;
					}

					.tile-subtitle {
						line-height: 20px;
						margin: 0;
					}
				}
			}

			.tile-image {
				z-index: 0;
				width: 100%;
				height: 100%;
				grid-row: 1/2;

				picture {
					height: 100%;
					width: 100% !important;
				}
			}
		}

		.tile.square {
			grid-column: span 1;
			grid-row: span 2;

			.tile-content {
				grid-row: 2/3;
			}

			.tile-image--horizontal {
				display: none;
			}

			.tile-image--vertical {
				display: none;
			}

			.tile-image--square {
				grid-row: 1/2;

				picture img {
					display: block !important;
				}
			}
		}

		.tile.horizontal {
			grid-column: span 2;
			grid-row: span 2;

			.tile-content {
				grid-column: 1/3;
			}

			.tile-image--vertical {
				display: none;
			}

			.tile-image--square {
				display: none;
			}

			.tile-image--horizontal {
				grid-column: 1/3;

				picture img {
					display: block !important;
				}
			}
		}

		.tile.vertical {
			grid-row: span 4;
			grid-column: span 1;

			.tile-content {
				grid-row: 4/5;
			}

			.tile-image--horizontal {
				display: none;
			}

			.tile-image--square {
				display: none;
			}

			.tile-image--vertical {
				grid-row: 1/4;

				picture img {
					display: block !important;
				}
			}
		}

		.buttons-container {
			margin-top: 36px;
			display: flex;
			justify-content: center;
			flex-flow: row wrap;
			column-gap: 18px;
			row-gap: 16px;

			.button {
				display: inline-block;
				text-align: center;
				padding: 8px 24px;
				border: 1px solid var(--color-brand-text-fg);
				color: var(--text-color);
				min-width: 240px;
				line-height: 23px;
				font-size: 16px;

				&.accent {
					background-color: var(--color-brand-accent);
					--text-color: var(--color-brand-text-on-accent);
				}

				&.accent2 {
					background-color: var(--color-brand-accent2);
					--text-color: var(--color-brand-text-on-accent2);
				}
			}
		}
	}

	@container (max-width: 900px) {
		.tiles-container {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	@container (max-width: 700px) {
		.tiles-container {
			grid-template-columns: repeat(2, 1fr);

			.tile.vertical {
				grid-row: span 2;
				grid-column: span 1;

				.tile-image--vertical {
					display: none;
				}

				.tile-image--horizontal {
					display: none;
				}

				.tile-image--square {
					display: block;

					picture img {
						display: block !important;
					}
				}
			}
		}
	}

	@container (max-width: 500px) {
		.tiles-container {
			grid-template-columns: 1fr;
			max-width: 700px;
			margin: 0 auto;

			.tile {
				grid-column: span 1 !important;
				grid-row: span 2 !important;

				.tile-content {
					grid-row: 2/3 !important;
				}

				.tile-image--vertical {
					display: none !important;
				}

				.tile-image--square {
					display: none !important;
				}

				.tile-image--horizontal {
					display: block !important;
					grid-row: 1/2 !important;

					picture img {
						display: block !important;
					}
				}
			}
		}
	}

	&.dynamic-grid--style-pop-out {
		.tile {
			overflow: visible;

			.tile-content {
				transform: translateY(-20px) translateX(20px);
				box-shadow: -10px 10px 0px #00000026;
			}

			.tile-image {
				grid-row: 1/3 !important;
			}

			.tile-image--vertical {
				grid-row: 1/5 !important;
			}
		}
	}
}