:root {
	--site-background: #000000;
	--main-text-color: #CDCDCD;
	--main-title-color: #F4F4F4;
	--additionsl-color: #DF4B0C;
}
html {
	font-size: 14px;
}
* {
	margin:0;
	padding:0;
	box-sizing:border-box;
}
.container {
	width:100%;
	margin:0 auto;
	max-width:1280px;
}
body {
	font-family: Open Sans;
	display:flex;
	flex-direction:column;
	background:var(--site-background);
}
header, header > ul {
	display:flex;
	align-items:center;
	justify-content:space-between;
}
header {
	position: sticky;
	top: 0;
	z-index: 2;
	background: var(--site-background);
	width: 100%;
	height: var(--header-height);
}
main {
	display:flex;
	flex-direction:column;
	gap:var(--outer-space);
}
a {
	color: var(--additionsl-color);
	text-decoration:none;
}
ul, ol {
	list-style:none;
}
header > ul {
	gap: 15px;
}
.brand {
	font-size: var(--second-title-size);
	color:var(--main-text-color);
}
.ico {
	width: 40px;
	height: 40px;
}
.block {
	overflow:hidden;
	position:relative;
	display:flex;
	width:100%;
	height:350px;
}
.block:after {
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background: linear-gradient(to right, #111111 30%, transparent);
}
.block__child {
	width:100%;
	position:absolute;
	display:flex;
	flex-direction:column;
	justify-content:space-evenly;
	height:100%;
	z-index:1;
}
.title_1, .title_2 {
	font-weight: 600;
	word-wrap: break-word;
	white-space:nowrap;
}
.title_2, .title_3 {
	color: var(--main-text-color);
}
.title_1 {
	font-size: var(--main-title-size);
	color: var(--main-title-color);
}
.title_2 {
	font-size: var(--second-title-size);
}
.title_3 {
	font-size: var(--third-title-size);
}
.title_3 ~ button {
	width:50%;
}
button {
	height: 55px;
	background: var(--additionsl-color);
	box-shadow: 8px 8px 4px rgba(0, 0, 0, 0.25);
	border-radius: 10px;
	border: 1px black solid;
	font-size:var(--third-title-size);
	color:var(--main-text-color);
	text-transform:uppercase;
	cursor:pointer;
}
.auto_image {
	position:relative;
	height:100%;
	width:100%;
}
.auto_image > img {
	position:absolute;
	top:0;
	right:0;
	width:55%;
	height:100%;
	object-fit:cover;
}
.mrg {
	margin-top:var(--outer-space);
}
.block__name {
	background: radial-gradient(#535353, transparent);
	height:var(--header-height);
	width:100%;
	display:flex;
	justify-content:center;
	align-items:center;
}
.block__name span {
	font-weight:bold;
	color:var(--main-text-color);
	font-size: var(--second-title-size);
}
.block__advantages {
	width:100%;
	display:flex;
	justify-content:space-evenly;
	flex-flow:row wrap;
	gap: 25px 0;
}
.advantages svg {
	height:var(--advanate-size);
}
.advantages {
	width: calc(100% / 6);
	color: var(--main-text-color);
	fill: var(--additionsl-color);
	font-size:var(--site-text-size);
	text-align:center;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.advantages:hover {
	cursor: pointer;
}
.advantages span {
	width:100%;
	display:block;
	font-size:var(--site-text-size);
	text-align:center;
}
.offers {
	display:flex;
	width:100%;
	height:100%;
	flex-flow:row wrap;
	gap: var(--offer-space);
}
.offer {
	display:flex;
	position:relative;
	overflow:hidden;
	border-radius:10px;
	border: 3px solid var(--additionsl-color);
	aspect-ratio: 1 / 0.6;
}
.offer:after {
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background: linear-gradient(to top, #111111 22%, transparent);
}
.offer img {
	position:absolute;
	bottom:25%;
	left:0;
	width:100%;
	height:75%;
	object-fit:cover;
}
.offer .info {
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:25%;
	display:flex;
	flex-direction:column;
	justify-content:center;
	z-index:1;
}
.info > span, .info > h3 {
	text-transform:uppercase;
	display:block;
	min-width:100%;
	font-size:var(--info-text-size);
	text-align:center;
	color: var(--main-text-color);
}
footer {
	display:flex;
	height:max-content;
	width: 100%;
	color: var(--main-text-color);
	padding-bottom:var(--outer-space);
}
footer .left {
	width:30%;
	font-size:var(--footer-text-size);
}
.left address {
	width:100%;
	height:100%;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
}
footer .right {
	font-size:14px;
	width:70%;
}

/* Max-width 320px */
@media (max-width: 600px) {
	:root {
		--header-height: 64px;
		--main-title-size: 24px;
		--second-title-size: 16px;
		--third-title-size:14px;
		--site-text-size: 14px;
		--info-text-size: 14px;
		--footer-text-size: 17px;
		--outer-space: 15px;
		--offer-space:15px;
		--advanate-size: 80px;
	}
	header, footer, main > *:not(.block__name, .block), main > .block > .block__child {
		padding: 0 15px;
	}
	.block__offer {
		width:100%;
	}
	.offer {
		width:100%;
	}
	.title_3 ~ button {
		display:none;
	}
	.title_1 {
		white-space:normal;
	}
	.ico {
		width: 32px;
		height: 32px;
	}
	.block__advantages {
		overflow:hidden;
	}
	.block {
		height:250px;
	}
	.advantages {
		width:30%;
	}
	.advantages > span {
		width:100%;
	}
	.offer {
		width: 100%;
	}
	footer {
		gap:15px;
		flex-wrap:wrap;
	}
	footer .left {
		width:100%;
	}
	footer .right {
		width:100%;
		font-size:10px;
	}
}
/* Max-width 1200px and Min-width 320px */
@media (max-width: 1280px) and (min-width: 601px) {
    :root {
		--header-height: calc(4rem + 20 * (100vw - 600px) / 680); /*84px;*/
		--main-title-size: calc(1.7143rem + 24 * (100vw - 600px) / 680);
		--second-title-size: calc(1rem + 16 * (100vw - 600px) / 680);
		--third-title-size: calc(1rem + 12 * (100vw - 600px) / 680);
		--site-text-size: calc(1rem + 14 * (100vw - 600px) / 680);
		--info-text-size: calc(1rem + 8 * (100vw - 600px) / 680);
		--footer-text-size: calc(1rem + 3 * (100vw - 600px) / 680);
		--outer-space: calc(1.08rem + 35 * (100vw - 600px) / 680);
		--offer-space: calc(1.08rem + 10 * (100vw - 600px) / 680);
		--advanate-size:calc(5rem + 80 * (100vw - 600px) / 680);
	}
	header, footer, main > *:not(.block__name, .block), main > .block > .block__child {
		padding: 0 15px;
	}
	.block__offer {
		width: calc((100% / 2) - 14px);
	}
	.offer {
		width: calc((100% / 2) - ((var(--offer-space) / 2) + 0.5px));
	}
	.advantages {
		width:30%;
	}
}
/* Min-width 1200px */
@media (min-width: 1281px) {
	:root {
		--header-height: 84px;
		--main-title-size: 48px;
		--second-title-size: 30px;
		--third-title-size:24px;
		--site-text-size: 28px;
		--info-text-size: 20px;
		--footer-text-size: 17px;
		--outer-space: 50px;
		--offer-space: 25px;
		--advanate-size:160px;
	}
	.bloc__offer {
		width: calc((100% / 3) - (34px / 2));
	}
	.offer {
		width: calc((100% / 3) - (var(--offer-space) / 1.5));
		/*width: calc((100% / 3) - (34px / 2));*/
	}
}