vidok.com/layout/style-scss/gwarancja.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-144 {
	@extend .box-mb;

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

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

	p {
		@extend .p;

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

		a {
			font-size: 16px;
		}
	}

	.col-left {
		width: 100%;
		max-width: 566px;

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

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

	h3 {
		@extend .h3;
		margin-bottom: 48px;

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

	p {
		@extend .p;
		text-transform: uppercase;
	}

	ul {
		li {
			@extend .p;

			&:not(:last-child) {
				margin-bottom: 20px;
			}
		}
	}

	.row {
		@include respond-below(sm) {
			flex-direction: column-reverse;
		}
	}

	.col-left {
		display: flex;
		justify-content: flex-end;

		@include respond-below(sm) {
			justify-content: center;
		}

		img {
			max-width: unset !important;
			@include respond-above(sm) {
				width: auto !important;
			}
			@include respond-below(sm) {
				width: 100vw !important;
			}
		}
	}

	.col-right {
		position: relative;
		margin: 0 auto;
		max-width: fit-content;

		@include respond-above(sm) {
			padding-bottom: 48px;
			&::before {
				content: '';
				position: absolute;
				bottom: 0;
				left: 0;
				height: 1px;
				width: 260px;
				background-color: #000000;
			}
		}
		@include respond-below(sm) {
			padding-bottom: 20px;
		}
	}
}

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

	.row {
		&:nth-child(1) {
			margin-bottom: 48px;

			h3 {
				@extend .h3;

				@include respond-above(sm) {
					text-align: center;
				}
			}
		}
	}

	.col-md-4 {
		&:nth-child(1) {
			background: #1d1d1e;

			.tile {
				h3,
				p {
					color: #fff;
				}
			}
		}
		&:nth-child(2) {
			background: #ffffff;
		}
		&:nth-child(3) {
			background: #ffed00;
		}
	}

	.tile {
		padding: 60px 20px;

		h3 {
			@extend .h4;
			text-transform: uppercase;
			margin-bottom: 30px;
		}
		p {
			@extend .p;

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

			strong {
				display: block;
			}
		}
	}
}

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

	h3 {
		@extend .h3;
		margin-bottom: 30px;
		text-transform: uppercase;
	}

	h4 {
		@extend .h4;
		margin-bottom: 30px;
		margin-top: 30px;
		text-transform: uppercase;
	}

	p {
		@extend .p;
	}

	ul {
		li {
			@extend .p;

			&:not(:last-child) {
				margin-bottom: 20px;
			}
		}
	}

	.col-right {
		display: flex;
		justify-content: flex-start;

		@include respond-below(sm) {
			justify-content: center;
		}

		img {
			max-width: unset !important;
			@include respond-above(sm) {
				width: auto !important;
			}
			@include respond-below(sm) {
				width: 100vw !important;
			}
		}
	}

	.col-left {
		position: relative;
		max-width: 620px;

		@include respond-above(sm) {
			padding-bottom: 48px;
			&::before {
				content: '';
				position: absolute;
				bottom: 0;
				left: 0;
				height: 1px;
				width: 260px;
				background-color: #000000;
			}
		}
		@include respond-below(sm) {
			padding-bottom: 20px;
		}
	}
}