@charset "utf-8";
@media only screen and (max-width: 1023px) {
		h1, .h1, h2, .h2 {
				font-size: 26px;
		}
		.toggle-menu {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				align-self: stretch;
				margin: 0 -10px;
				padding: 0 20px;
				gap: 8px 0;
				cursor: pointer;
				user-select: none;
		}
		.toggle-menu:before, .toggle-menu:after {
				content: '';
				flex: 0 0 auto;
				width: 25px;
				height: 2px;
				background: var(--white);
				border-radius: 1px;
				transform: translate3d(0, 0, 0) rotate(0deg);
				transition-property: transform, background;
				transition-duration: 0.2s;
				transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
		}
		@media (pointer:fine) {
				.toggle-menu:hover:before, .toggle-menu:hover:after {
						background-color: var(--yellow);
				}
		}
		.open-menu .toggle-menu:before {
				transform: translate3d(0, 5px, 0) rotate(-135deg);
		}
		.open-menu .toggle-menu:after {
				transform: translate3d(0, -5px, 0) rotate(135deg);
		}
		@media (pointer:coarse) {
				html.open-menu {
						overflow: hidden;
				}
		}
		.head-logo {
				margin-right: auto;
		}
		.head-menu {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				transform: translateZ(0);
				flex-direction: column;
				align-items: flex-start;
				justify-content: flex-start;
				font-size: 18px;
				line-height: 1.7;
				padding: 90px 20px 20px 20px;
				gap: 4px;
				background: var(--dark);
				color: var(--white);
				transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
				z-index: 2;
		}
		html:not(.open-menu) .head-menu {
				opacity: 0;
				pointer-events: none;
		}
		.head-menu-fader {
				display: block;
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: 1;
				transition: opacity 0.2s ease-out;
				background: rgba(0, 21, 43, 0.5);
				backdrop-filter: blur(20px);
				-webkit-backdrop-filter: blur(20px);
		}
		html:not(.open-menu) .head-menu-fader {
				opacity: 0;
				pointer-events: none;
		}
		.consult {
				flex-direction: column;
		}
		.consult h2, .consult .h2 {
				margin: 0 0 20px 0;
		}
		.consult h2 br, .consult .h2 br {
				display: none;
		}
		.consult .text {
				flex: 0 0 auto;
				width: 100%;
				max-width: none;
		}
		.consult ul {
				gap: 10px 0;
		}
		.consult .form {
				width: 100%;
				min-width: 0;
				max-width: none;
		}
		.faq .block {
				padding: 30px;
				flex-direction: column;
				gap: 20px 30px;
		}
		.faq .col {
				flex: 0 0 auto;
				width: 100%;
		}
		.item-vert .head, .item-hor .head {
				flex: 0 0 auto;
				padding: 0;
				margin: 0 0 16px 0;
		}
		.item-vert .price, .item-hor .price {
				width: 100%;
				margin: 20px 0 0 0;
				padding: 0;
				align-items: center;
		}
		.item-hor .price {
				border-radius: 0;
				flex-direction: row;
				background: none;
				color: var(--yellow);
		}
		.item-hor .price strong {
				color: var(--dark);
		}
		.catalog-grid, .sets-grid {
				grid-template-columns: repeat(1, 1fr);
				gap: 30px 20px;
		}
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
		.container {
				padding-left: 20px;
				padding-right: 20px;
		}
		.footer .container {
				gap: 35px 25px;
				grid-template-areas:
						"lo lo"
						"li li"
						"ad co"
						"cp te";
				grid-template-columns: 1fr 1fr;
				grid-template-rows: auto auto auto 1fr;
		}
		.foot-contacts {
				text-align: left;
				padding-right: 0;
		}
		.foot-contacts .soc {
				justify-content: flex-start;
		}
		.foot-contacts a[href^=tel] {
				color: var(--white-grey);
				text-decoration: none;
		}
		.foot-links > * {
				flex: 1;
		}
		.foot-copy {
				margin: 0;
				align-self: flex-end;
				padding-left: 0;
		}
		.foot-text {
				padding: 0;
		}
		.top-block {
				font-size: 18px;
				line-height: 1.2;
		}
		.top-block h1, .top-block .h1 {
				font-size: 60px;
		}
		.top-block .line {
				display: none;
		}
		.consult {
				padding: 30px;
				gap: 30px 0;
		}
		.benefits {
				padding: 40px 0;
				gap: 20px;
		}
		.benefits li:before {
				display: none;
		}
		.benefits li {
				padding: 20px;
		}
		.benefits img {
				position: static;
				top: auto;
				left: auto;
				transform: none;
				display: block;
				margin: 0 0 20px 0;
		}
		.top-title h2, .top-title .h2 {
				font-size: 40px;
		}
		.catalog {
				padding-top: 60px;
				padding-bottom: 60px;
				background-size: 500px auto;
		}
		.catalog .top-title {
				margin-bottom: 30px;
		}
		.catalog .top-title:not(:first-child) {
				margin-top: 60px;
		}
		.item-vert, .item-hor {
				flex-direction: column;
				padding: 20px 20px 20px 50%;
		}
		.item-vert > *, .item-hor > * {
				flex: 0 0 auto;
				width: 100%;
		}
		.item-vert .photo, .item-hor .photo {
				margin: 0;
				width: calc(50% - 20px);
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				border-radius: 10px 0 0 10px;
		}
		.item-vert .top {
				right: auto;
				left: -16px;
		}
		.item-hor .bottom {
				padding-right: 0;
		}
		.item-hor .descr {
				padding: 0;
				margin: 0;
				width: 100%;
		}
		.call-consult {
				margin: 40px 0 0 0;
				padding: 20px;
				gap: 0 20px;
		}
		.sets {
				padding: 60px 0;
		}
		.sets .top-title {
				margin-bottom: 30px;
		}
		.faq {
				margin: 0 0 60px 0;
		}
		.faq .block {
				padding: 30px;
				gap: 20px 30px;
		}
		.location {
				margin: 60px 0;
		}
		.location .text {
				padding: 30px;
		}
		.comp {
				margin: 60px 0;
		}
		.comp .text {
				padding: 30px;
		}
		.comp h2, .comp .h2 {
				margin-bottom: 20px;
		}
		.about {
				padding-top: 60px;
				padding-bottom: 90px;
		}
		.about .text, .about .image {
				width: calc(50% - 30px);
		}
}