vidok.com/layout/style-scss/materialy-do-pobrania.scss

@import 'mixins';
@import 'variables';

body {
	background-color: #f8f7f3;
}

.page-data {
	overflow: hidden;
}

.container {
	@include respond-above(xxl) {
		max-width: 1530px;
	}
}

.h2 {
	font-size: 50px;
	font-weight: 250;
	line-height: 1;
	letter-spacing: 2px;
	font-family: $font3;

	@include respond-below(xs) {
		font-size: 34px;
	}
}

.h3 {
	font-size: 34px;
	font-weight: 300;
	line-height: 1;
	letter-spacing: 2px;
	font-family: $font3;
	color: #1d1d1e;

	@include respond-below(xs) {
		font-size: 24px;
	}
}

.h4 {
	font-size: 24px;
	font-weight: 300;
	line-height: 1;
	letter-spacing: 2px;
	font-family: $font3;
	color: #1d1d1e;
}

.p {
	font-size: 16px;
	font-weight: 300;
	line-height: 24.8px;

	strong {
		font-weight: 700;
	}
}

.box-mb {
	margin-bottom: 120px;

	@include respond-below(xs) {
		margin-bottom: 60px;
	}
}

#scontainer-148 {
	@extend .box-mb;

	h2 {
		@extend .h2;
		text-transform: uppercase;
		margin-bottom: 48px;
		padding-bottom: 48px;
		border-bottom: 1px solid #000000;

		@include respond-below(sm) {
			margin-bottom: 30px;
			padding-bottom: 30px;
		}
	}

	p {
		@extend .h3;
		text-transform: uppercase;
		margin-bottom: 0;
	}

	.col-left {
		max-width: 560px;

		@include respond-below(sm) {
			margin-bottom: 30px;
		}
	}
}

#scontainer-149 {
	@extend .box-mb;

	p {
		color: #ffffff;
		font-size: 24px;
		font-weight: 300;
		letter-spacing: 2px;
		text-align: center;
		text-transform: uppercase;
		margin-bottom: 40px;

		@include respond-below(xs) {
			margin-bottom: 20px;
		}
	}

	.row {
		&-1 {
			margin-bottom: 40px;

			ul {
				padding: 0;
				margin: 0;
				list-style: none;

				display: flex;
				flex-direction: row;
				justify-content: center;
				flex-wrap: wrap;
				gap: 8px;

				li {
					a {
						color: #fff;
						font-size: 14px;
						font-weight: 700;
						letter-spacing: 1px;
						text-transform: uppercase;
						display: flex;
						align-items: center;
						padding: 18px 35px;
						background: #1d1d1e;
					}
				}
			}
		}

		&-2 {
			justify-content: center;

			> div {
				margin-bottom: 20px;
				padding: 0 10px;

				> div {
					padding: 70px 40px;
					background: #1d1d1e;
					height: 100%;

					@include respond-below(xs) {
						padding: 40px 10px;
					}
				}
			}

			ul {
				padding: 0;
				margin: 0;
				list-style: none;
				display: flex;
				justify-content: center;
				flex-direction: row;
				gap: 8px;

				li {
					&:nth-child(1) {
						a {
							background: #dfdfdf;

							&::after {
								content: url('/upload/filemanager/icon/file.svg');
							}
						}
					}

					&:nth-child(2) {
						a {
							background: #fff;

							&::after {
								content: url('/upload/filemanager/icon/see.svg');
							}
						}
					}

					a {
						font-size: 14px;
						font-weight: 700;
						letter-spacing: 1px;
						text-transform: uppercase;

						display: flex;
						align-items: center;
						gap: 10px;
						position: relative;
						padding: 18px 35px;

						&::after {
							height: 24px;
							width: 24px;
						}

						&:hover {
							color: #1d1d1e;
						}

						@include respond-below(xs) {
							padding: 15px;
						}
					}
				}
			}
		}
	}
}

#scontainer-162 {
	@extend .box-mb;
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 60px;

	.row {
		&-1 {
			margin-bottom: 40px;

			ul {
				padding: 0;
				margin: 0;
				list-style: none;

				display: flex;
				flex-direction: row;
				justify-content: center;
				flex-wrap: wrap;
				gap: 8px;

				li {
					a {
						color: #fff;
						font-size: 14px;
						font-weight: 700;
						letter-spacing: 1px;
						text-transform: uppercase;
						display: flex;
						align-items: center;
						padding: 18px 35px;
						background: #1d1d1e;
					}
				}
			}
		}

		&-2,
		&-4 {
			justify-content: center;

			ul {
				margin: 0 0 50px 0;
				padding: 0;
				list-style-type: none;
				display: grid;
				grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
				gap: 20px;

				li {
					max-width: 350px;
					margin-left: auto;
					margin-right: auto;

					a {
						border: 1px solid #d4d4d4;
						display: flex;
						flex-direction: column;
						flex-wrap: wrap;
						align-items: center;
						justify-content: center;
						padding: 25px;
						color: #000;
						transition: ease 0.3s all;
						position: relative;
						gap: 10px;

						&:hover {
							border: 1px solid #000;
						}

						.img {
							position: relative;
							// background: #ebebeb;

							// &::before {
							// 	content: '';
							// 	position: absolute;
							// 	inset: -25px -25px 0 -25px;
							// 	background: #ebebeb;
							// }

							img {
								position: relative;
								aspect-ratio: 1/1;
								object-fit: contain;
								z-index: 1;
							}
						}
						img {
							width: 100%;
						}

						span {
							position: relative;
							font-size: 16px;
							font-weight: 600;
							margin-bottom: 0;

							display: flex;
							align-items: center;
							gap: 10px;

							&::after {
								content: url('/upload/filemanager/icon/file.svg');
								line-height: 1;
							}
						}
					}
				}
			}
		}
	}
}

#scontainer-163 {
	@extend .box-mb;
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;

	p {
		&:last-child {
			margin-bottom: 0;
		}
	}
}

body.page-5 {
	background: #fff;
}