new-templane/resources/sass/styles.scss

// Main SASS file
// Import all partial files

@import 'base/reset';
@import 'base/fonts';
@import 'base/mixins';
@import 'base/variables';
@import 'base/typography';

@import 'layout/header';
@import 'layout/footer';

@import 'components/buttons';
@import 'components/tables';
@import 'components/author';
@import 'components/faq';
@import 'components/toc';
@import 'components/slot-item';

body{
	padding-top:70px;
	background-color: var(--body-bg-color);
	color: var(--text-color);
	font-style: normal;
	font-weight: 400;
	line-height: 24px; /* 150% */

	&.menu-open {
		overflow: hidden;
	}
}
// Container
.container {
    max-width: var(--container-width);
    width: 100%;
    height: 100%;
    margin: 0 auto;
		padding-left: 16px !important;
		padding-right:16px !important;
}

//banner
.banner{
	background:#000;
	display:flex;
	align-items: center;
	justify-content: center;
	&__img-wrp{
		max-width:1920px;
		max-height:540px;
		overflow: hidden;
		margin:0 auto;
	}
	&__img{
		display:block;
		width:100%;
		height:100%;
		object-fit: cover;
	}
}

.section-wrapper{
	padding:32px 0;
	display:flex;
	flex-direction: column;
	gap:32px;
	width:100%;
	@include tablet{
		gap:24px;
		padding:24px 0;
	}
	@include mobile{
		gap:16px;
		padding:16px 0;
	}
}

.section{
	padding:32px;
	border-radius: 16px;
	border: 1px solid var(--content-border-color);
	background: var(--content-bg-color);
	@include tablet{
		padding:24px;
	}
	@include mobile{
		padding:16px;
	}
	&__title{
		 margin-top:0;
	}
}

// Links
a {
	color: var(--link-color);
	text-decoration: none;
	transition: color 0.3s ease;

	&:hover {
		opacity: 0.8;
	}
}

// Tables
table {
	background: var(--table-bg-color);
	color: var(--text-color);
}

th,
thead,
table thead tr {
	background-color: var(--table-header-color);
	color: var(--text-color);
}

caption {
	background: var(--table-header-color);
	color: var(--text-color);
}



.game-item{
	border-radius: var(--border-radius-main);
	overflow:hidden;
	position:relative;
	//padding:0 12px 0 12px;
	padding-top:52%;
	box-shadow: 0px 2px 44px 0px rgba(188, 188, 188, 0.15);
	background:#fff;
	@include mobile{
		padding-top:60%;
		border-radius:12px;
		box-shadow: 0px 1.4px 30.803px 0px rgba(188, 188, 188, 0.15);
	}
	&__inner{
		position:absolute;
		top:0;
		left:0;
		width:100%;
        overflow:hidden;
		height:calc(100% - 45px); // 45px - height title
		@include mobile{
			height:calc(100% - 40px);
		}
        &:hover{
            .game-item__hover{
                opacity:1;
                visibility: visible;
            }
	    }
	}
	&__title{
		color: rgba(2, 0, 5, 0.80);
		text-align: center;
		font-size: 16px;
		font-style: normal;
		font-weight: 400;
		line-height: 1.1em;
		width:100%;
		height:45px;
		display:flex;
		align-items: center;
		justify-content: center;
		background:#fff;
        position:relative;
        padding:0 12px;
		@include tablet{
			font-size:14px;
		}
		@include mobile{
			font-size:12px;
			height:40px;
		}
	}
	&__link{
        display:inline-flex;
        align-items: center;
        gap:8px;
        text-decoration: none !important;
		color: rgba(2, 0, 5, 0.80) !important;
        @include mobile{
            gap:4px;
        }
        &:before{
            content:'';
            display:block;
            width:100%;
            height:100%;
            position:absolute;
            top:0;
            left:0;
        }
		&:hover{
			color:var(--color-theme-red) !important;
            .icon{
                fill:url('#icon-gradient-red');
            }
		}
        .icon{
            width:20px;
            height:20px;
            flex-shrink: 0;
            fill:#0076CC;
            @include mobile{
                width:12px;
                height:12px;
            }
        }
	}
    &__link-text{
        display:inline-flex;
        align-items: center;
    }
    &__link-icon{
        width:20px;
        height:20px;
        display:flex;
        align-items: center;
        justify-content: center;
        fill:#0076CC;
    }
	&__picture{
		position:absolute;
		top:0;
		left:0;
		bottom:0;
		right:0;
	}
	&__image{
		display:block;
		width:100%;
		height:100%;
		object-fit: cover;
		transition: 0.3s ease-out;
	}
	&__tags{
		position:absolute;
		top:0;
		left:12px;
		display:flex;
	}
	&__tagsItm{
		margin-right:8px;
		border-radius: 0px 0px 8px 8px;
		background: linear-gradient(90deg, #2D2BA7 0%, #BA73D1 100%);
		text-transform: uppercase;
		overflow:hidden;
		@include mobile{
			border-radius: 0px 0px 5px 5px;
		}
		&--hot{
			background: #F5294D;
		}
	}
	&__tagsLink{
		display:block;
		color:#fff;
		padding:8px 16px;
		color:#fff;
		font-size: 12px;
		font-weight: 900;
		line-height: 1em;
		@include mobile{
			padding:3px 11px;
			font-size:9px;
		}
	}
	&__info{
		position:absolute;
		top:8px;
		right:8px;
		display:flex;
		align-items: center;
		justify-content: end;
	}
	&__provide{
		width:32px;
		height:32px;
		border-radius:50%;
		background:#000;
		display:flex;
		justify-content: center;
		align-items: center;
		//padding:8px;
		padding:2px;
		margin-right:8px;
		@include mobile{
			width:24px;
			height:24px;
			margin-right:5px;
		}
		.icon{
			fill:#fff;
		}
	}
	&__rating{
		width: 36px;
		height: 36px;
		position:relative;
		@include mobile{
			width: 28px;
			height: 28px;
		}
	}
	&__ratingVal{
		font-size: 12px;
		@include mobile{
			font-size:10px;
		}
	}
	&__rtp{
		padding:4px 8px;
		background: linear-gradient(var(--gradient-theme-red));
		border-radius:8px;
		font-size: 12px;
		font-style: normal;
		font-weight: 600;
		color:#fff;
		line-height:1em;
		height:24px;
		display:flex;
		align-items: center;
		position:absolute;
		bottom:8px;
		right:8px;
	}
	&__countPlay{
		color:#fff;
		font-size:12px;
		padding:4px 8px;
		font-size: 12px;
		line-height:1em;
		font-weight: 600;
		border-radius:8px;
		background:rgba(2, 0, 5, 0.80);
		position:relative;
		display:flex;
		height:24px;
		align-items: center;
		justify-content: space-between;
		position:absolute;
		bottom:8px;
		left:8px;
		.icon{
			fill:#fff;
		}
	}
	&__countTxt{
		padding-left:5px;
	}
	&__btn{
		margin-top:16px;
		width:100%;
		max-width:120px;
		@include mobile{
			margin-top:8px;
			font-size:12px;
			padding:8px 20px;
			max-width:100px;
		}

	}
	&__hover{
		position:absolute;
		top:0;
		left:0;
		bottom:0;
		right:0;
		background:rgba(2, 0, 5, 0.80);
		display:flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		padding:20px;
		opacity:0;
		z-index: 1;
		transition: 0.5s ease-out;
		visibility: hidden;
        cursor:pointer;
	}
}


.slots-grid{
	display:grid;
	grid-template-columns: repeat(5, 1fr);
	gap:8px;
	@include tablet{
		grid-template-columns: repeat(3, 1fr);
	}
	@include mobile{
		grid-template-columns: repeat(2, 1fr);
	}
}