<div class="block" id="promo">
        <div class="container">
            <h1 class="block-title">Акции</h1>
            <h1 class="block-subtitle">Здесь всегда есть что-то интересное</h1>
            <div class="cards">
                <div class="card">
                    <h1 class="card-title">Счастливые будни</h1>
                    <card class="card-paragraph"><b>Платите меньше</b> - катайтесь больше! <b>20 мин</b> - от 700 до 1100 рублей, <b>30 мин</b> - от 1000 до 1400.</card>
                </div>
                <div class="card">
                    <h1 class="card-title">Весь для Вас</h1>
                    <card class="card-paragraph">Арендуйте <b>целый картинг</b> и катайтесь все вместе! <b>Будни</b> - 15 000 / час, <b>Выходные</b> - 20 000 / час.</card>
                </div>
                <div class="card">
                    <h1 class="card-title">Лучший подарок</h1>
                    <card class="card-paragraph">Дайте возможность почувствовать себя <b>гонщиком</b> - подарите сертификат на <b>20 мин картодрома</b> за 1400 рублей!</card>
                </div>
            </div>
            <p class="block-paragraph"><b>*</b> По вопросам об акциях и условиях их проведения обращайтесь по контактным данным.</p>
        </div>
    </div>

    <div class="bg-img"></div>

    <!-- Блок галереи -->
    <div class="block" id="gallery">
        <div class="container">
            <h1 class="block-title">Галерея</h1>
            <div class="gallery-slider">
                <div class="gallery-track">
                    <div class="gallery-img"></div>
                    <div class="gallery-img"></div>
                    <div class="gallery-img"></div>
                </div>
            </div>
            <div class="btns">
                <button class="btn" onclick="scrollGalleryTrack(false)" style="margin-right: 25px">&lt;</button>
                <button class="btn" onclick="scrollGalleryTrack(true)">&gt;</button>
            </div>
        </div>
    </div>

    <div class="bg-img"></div>

    <!-- Блок контактов -->
    <div class="block" id="contacts">
        <div class="container">
            <h1 class="block-title">Контакты</h1>
            <h1 class="block-subtitle">Бронируйте в будние дни.</h1>
            <p class="block-paragraph">Мы работаем <b>ежедневно с 11 до 23</b> по адресу <b>ул. Менжинского 2П</b>.</br>
            С нами можно связаться по почте <b>m4karting@mail.ru</b>, по номеру телефона <b>8 (903) 401-06-08</b> и <b>8 (863) 221-06-08</b>.<br>
            А за новостями проходите в наш <a target="_blank" href="https://www.instagram.com/karting_m4"><b>Инстаграм</b></a></p>
            <iframe class="gmaps" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d671.1006211400817!2d39.76345164123173!3d47.25523166584187!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40e3b9d936812829%3A0x5e4b5be490b2398b!2z0JrQsNGA0YLQvtC00YDQvtC8INCcNA!5e0!3m2!1sru!2sru!4v1636578454070!5m2!1sru!2sru" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
        </div>
    </div>

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* Переменные */
:root {
	--accent: #ff6f6f;
	--white: #fff;
	--dark: #1a1c1f;
}

/* Базовая настройка страницы */
* {
	margin: 0;
	padding: 0;
	font-family: "Montserrat";
}

a {
	text-decoration: none;
	color: var(--dark);
	cursor: pointer;
}

b {
	color: var(--accent);

	transition: .2s;
}

/* Контейнер */
.container {
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
}

/* Интро */
.intro {
	display: grid;
	height: 100vh;
	background: url("src/img/download (3).jpg") center no-repeat #1a1c1faa;
	background-size: cover;
	background-blend-mode: darken;
	align-items: center;
	text-align: center;
}

.intro-title {
	color: var(--white);
	font-size: 100px;
	text-transform: uppercase;
}

/* Шапка */
.header {
	padding: 10px;
	background: var(--white);
	z-index: 1;
}

.header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.sticky-header {
	position: fixed;
	top: 0;
	width: 100%;
}

.header-logo {
	font-size: 25px;
	text-transform: uppercase;

	user-select: none;
}

.header-menu-btn {
	display: none;
	font-size: 30px;
	cursor: pointer;

	user-select: none;
}

.cross {
	display: none;
}

.header-menu {
	display: flex;
	list-style: none;
}

.header-menu-item {
	padding: 0 15px;
}

.header-menu-item:hover a {
	color: var(--accent);

	transition: .2s;
}

/* Блоки */
.block {
	min-height: 90vh;
	padding: 75px 0;
	background: var(--dark);
	text-align: center;
	color: var(--white);
}

.block-title {
	font-size: 50px;
}

.block-subtitle {
	margin: 25px 0;
	padding: 0 25px;
	font-size: 20px;
	color: #aaa;
}

.block-paragraph {
	font-size: 23px;
	font-weight: 700;
	margin-top: 75px;
	padding: 0 25px;
	color: #aaa;
}

/* Карточный список */
.cards {
	display: flex;
	justify-content: space-evenly;
	margin-top: 50px;
}

.card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	max-width: 300px;
	min-width: 300px;
	min-height: 300px;
	margin-top: 50px;
	padding: 25px;
	border: 2px solid var(--accent);
	border-radius: 25px;

	transition: .2s;
}

.card:hover{
	border-radius: 0;
	background: var(--accent);
	transform: scale(1.05);
}

.card:hover b {
	color: var(--dark);
}

.card-icon {
	height: 80px;
	margin-bottom: 50px;
}

.card-paragraph {
	font-size: 22px;
	font-weight: 700;
}


/* Задний фон */
.bg-img {
	width: 100%;
	height: 50vh;
}

/* Список балидов */
.balids {
	display: flex;
	justify-content: space-evenly;
	margin-top: 25px;
}

.balid-img {
	height: 220px;
}

.balid-name {
	margin-top: 50px;
	font-size: 30px;
	font-weight: 700;
}

.balid-price {
	font-size: 20px;
}

/* Галерея */
.gallery-slider {
	width: 720px;
	height: 480px;
	margin: 50px auto;
	border: 4px solid var(--accent);
	border-radius: 50px;
	overflow: hidden;
}

.gallery-track {
	display: flex;

	transition: 0.2s;
}

.gallery-img {
	min-width: 720px;
	height: 480px;
}

.gallery-img:nth-child(1) {
	background: url("src/img/download (1).jpeg") center no-repeat;
}

.gallery-img:nth-child(2) {
	background: url("src/img/download (3).jpg") center no-repeat;
}

.gallery-img:nth-child(3) {
	background: url("src/img/download.jpeg") center no-repeat;
}

.btn {
	width: 75px;
	background: #ffffff00;
	color: var(--white);
	border: 2px solid var(--accent);
	border-radius: 10px;
	font-size: 25px;
	font-weight: 600;
	transition: 0.2s;
}

.btn:hover {
	background: var(--accent);
	border-radius: 25px;
}

.btn:active {
	border-radius: 0;

	transition: 0.05s;
}

.gmaps {
	width: 800px;
	height: 500px;
	margin: 0 auto;
	margin-top: 50px;
	border-radius: 15px;
}

@media (max-width: 1150px) {
	.block .container{
		display: flex;
		flex-direction: column;
	}

	.cards {
		flex-direction: column;
		margin: 0 auto;
	}

	.card {
		min-width: 500px;
		min-height: 200px
	}

	.balids {
		display: flex;
		flex-direction: column;
	}

	.balid {
		margin-bottom: 75px
	}

	.balid-img {
		height: 300px
	}

	.balid-name {
		margin-top: 15px
	}
}

@media (max-width: 900px) {
	.intro-title {
		font-size: 75px;
	}
	
	.header .container {
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 10px;
	}

	.header-menu-btn {
		display: block;
		padding-right: 20px;
	}

	.header-menu {
		display: none;
		flex-direction: row;
	}

	.header-menu-item {
		padding: 3px 15px;
	}

	.header-menu-item:first-child {
		display: none
	}

	.gallery-slider {
		width: 480px;
		height: 360px;
	}

	.gallery-img {
		min-width: 480px;
		height: 360px;
	}

	.gmaps {
		width: 600px
	}
}

@media (max-width: 700px) {
	.card {
		max-width: 400px;
		min-width: 400px;
	}

	.card-paragraph {
		font-size: 18px
	}

	.balid-img {
		height: 250px;
	}

	.block-paragraph {
		font-size: 18px
	}

	.gmaps {
		width: 450px
	}
}

@media (max-width: 550px) {
	.intro-title {
		font-size: 50px
	}

	.header-menu {
		flex-direction: column
	}

	.card {
		min-width: 250px;
		max-width: 250px
	}

	.balid-img {
		height: 150px
	}

	#gallery, .header-menu-item:nth-child(5) {
		display: none;
	}
  
  .bg-img:last-child {
    display: none;
  }

	.gmaps {
		width: 250px
	}
}