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

.dynamic-grid-component {
	.dynamic-grid-title {
		text-align: center;
	}

	.tabs-menu {
		display: flex;
		align-items: stretch;
		list-style: none;
		padding: 0;
		border-bottom: 1px solid #ccc;
		margin-bottom: 36px;
		.tabs-menu-button {
			display: flex;
			margin-bottom: -1px;
			border: 1px solid #ccc;
			background: #eee;
			color: #666;
			font-size: 12px;
			transition: border 200ms, color 200ms;

			label {
				padding: 12px 15px;
				cursor: pointer;
			}
		}
		.tabs-menu-button:hover {
			border-top-color: #333;
			color: #333;
		}
	}

	.tabs-menu-radio {
		display: none;
	}

	.tab-container {
		display: none;

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

			.tile {
				position: relative;
				overflow: hidden;

				a {
					color: #000000;
					text-decoration: none;
				}

				.tile-content {
					position: absolute;
					background-color: #c3c3c3;
					width: 100%;
					opacity: 0.9;
					padding: 8px;
					z-index: 1;
					overflow: hidden;
					bottom: 0;
					box-sizing: border-box;

					.tile-content-wrapper {
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 4;
						line-height: 20px;
						height: 103px;
						overflow: hidden;
						.tile-title {
							font-weight: bold;
							line-height: 20px;
							margin: 10px 0;
						}

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

					.spacer {
						height: 5px;
					}
				}

				.tile-image {
					z-index: 0;
					width: 100%;
					height: 100%;
					picture {
						height: 100%;
						width: 100% !important;
					}
				}
			}

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

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

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

				.tile-image--square {
					picture img {
						display: block !important;
					}
				}
			}

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

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

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

				.tile-image--horizontal {
					picture img {
						display: block !important;
					}
				}
			}

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

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

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

				.tile-image--vertical {
					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 #000000;
				color: var(--text-color);
				min-width: 240px;
				line-height: 23px;
				font-size: 16px;
				&.dark {
					background-color: #000000;
					--text-color: #ffffff;
				}
				&.bright {
					background-color: #ffffff;
					--text-color: #000000;
				}
			}
		}
	}
	@container (max-width: 950px) {
		.tab-container {
			.tiles-container {
				grid-template-columns: repeat(2, 1fr);

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

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

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

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

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

				.tile.horizontal {
					grid-column: span 1;
				}
			}
		}
	}

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

				.tile {
					max-height: 450px;
				}

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

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

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

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

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