.iframe-games {
    border: none;
	height: calc(100dvh - 68px - 32px - 36px - 32px);
	width: 100%;
	    position: relative;
}

@media (min-width: 1024px) {
	.iframe-games {
		border-radius: 12px;
		box-shadow: var(--shadow-card);
	}
}

@media (max-width: 1024px) {
	.iframe-games {
		height: calc(100dvh - 70px - var(--height-layout-tabbar-with-safe-area));
		border: none;
	}
}

.frame-main.game {
    width: 100%;
    gap: var(--spacing-24);
    
    flex-direction: column;
    margin-inline: auto;
    display: flex;
	position: relative;
}

@media (min-width: 1024px) {
    .frame-main.game {
        --container__padding: var(--container-padding-desktop);
        gap: var(--spacing-32);
        padding-inline: var(--container-padding-desktop);
		padding-top: 0;
    }
}

.frame-main.game .footer_root {
	padding-block: 0 var(--container-page-content-padding-bottom-desktop);
}

@media (max-width: 1024px) {
	.frame-main.game .footer_root {
		--container__padding: var(--container-padding-mobile);
		padding-inline: var(--container__padding);
		padding-block: 0 var(--container-page-content-padding-bottom-mobile);
	}
}

/* Обертка для категорий */
.games-wrapper {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* Секция категории */


/* Анимация появления категорий */

@keyframes fadeIn {
    from {
        opacity: 0; 
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.game-box {

}





.game-card.with-animation {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Добавьте в games.css */


/* Добавим в games.css */
.banner-slider {
    width: 100%;
    height: clamp(250px, 25vw, 400px);
    position: relative;
	display: grid;
    overflow: hidden;
    margin-bottom: 24px;
    gap: 16px;
}

@media (min-width: 820px) {
	.banner-slider {
		grid-template: "a b" / 70% auto;
	}
}

@media (min-width: 1200px) {
	.banner-slider {
		grid-template: "a b" / 70% auto;
	}
}

@media (min-width: 1800px) {
	.banner-slider {
		grid-template: "a b" / 70% auto;
	}
}

.slides {
    width: 100%;
    height: 100%;
    position: relative;
	overflow: hidden;
	border-radius: 12px;
    box-shadow: 0px 0px 15px 8px rgba(0, 0, 0, 0.1);
	grid-area: a;
}





.slider-banner_1 {
	background-image: url(/img/banners/image1.png);
}

.slider-banner_2 {
	background-image: url(/img/banners/banner2.jpg);
}

.slider-banner_3 {
	background-image: url(/img/banners/banner3.png);
	display: flex;
    justify-content: center;
    align-items: center;
}

.slider-banner_4 {
	background-image: url(/img/banners/banner4.png);
	display: flex;
    justify-content: center;
    align-items: center;
}

.slider-banner_5 {
	background-image: url(/img/banners/banner5.png?v=1);
	display: flex;
    justify-content: center;
    align-items: center;
}

.slider-banner_6 {
	background-image: url(/img/banners/banner6.png);
	display: flex;
    justify-content: center;
    align-items: center;
}

.slider-banner-overlay-button {
	width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
	cursor: pointer;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: opacity 0.8s ease-in-out;
    transform: scale(1.05);
	pointer-events: none;
}

.slide.active {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.8s ease-in-out, transform 5s ease-in-out;
	pointer-events: auto;
}

/* Базовый слой (неподвижный фон) */
.slide-background {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center;
    z-index: 1;
	background-repeat: no-repeat;
}

/* Средний слой (движущийся) */
.slide-middle {
    position: absolute;
    width: 100%; /* Делаем больше, чтобы при движении не было пустых краёв */
    height: 100%;

    background-size: contain;
    background-position: center;
    z-index: 2;
    
}

/* Верхний слой (неподвижный) */
.slide-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 3;
	background-repeat: no-repeat;
}





.slide-dots {
    display: flex;
    gap: 8px;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #0f467f6b;
    cursor: pointer;
    transition: background 0.3s ease;
}

.dot.active {
    background: #076cd27d;
}
.main {
    width: 100%;
    max-width: 100%;
}