@import url('https://fonts.googleapis.com/css2?family=Jura:wght@500&display=swap');

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	--index: calc(1vw + 1vh);
	/* --gutter: 30px; */
	--side-small: 22;
	--side-big: 36;
	--depth: 2800px;
	--transition: .75s cubic-bezier(.075, .5, 0, 1);
}

body {
	font-family: 'Jura', sans-serif;
	letter-spacing: 2px;
	font-size: calc(var(--index) * 1.2);
	background-color: #000;
	color: #fff;
	line-height: 1.75;
	height: var(--depth);
}

.container {
	width: 100%;
	height: 100%;
	position: fixed;
	perspective: 1500px;
}

.gallary {
	transform-style: preserve-3d;
	height: 100%;
}

.contact {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
	transform-style: preserve-3d;
}

.frame {
	width: 100%;
	height: 100%;
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: var(--transition), opacity .75s ease;
	will-change: transform;
	transform-style: preserve-3d;
}

.frame__content {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.frame__content a {
	text-decoration: none;
	color: aqua;
}

h1,
h2,
h3,
h4 {
	text-transform: uppercase;
	width: min-content;
	line-height: 1.1;
	text-align: center;
}

.frame h1 {
	font-size: calc(var(--index) * 2.5);
	margin-bottom: 3vh;
}

.frame img {
	border-radius: 10px;
}

.frame-media {
	position: relative;
	height: calc(var(--index) * var(--side-small));
}

/* .frame-media__old-price {
	text-decoration: line-through;
} */

.frame-media__price {
	font-size: 1.2em;
}

.frame h2 {
	font-size: calc(var(--index) * 1.2);
	margin-bottom: 2vh;
}

.frame p {
	text-align: center;
	max-width: 95%;
}

.frame h3,
h4 {
	font-size: calc(var(--index) * 1.1);
	margin-bottom: 2vh;
}

.frame_bg {
	background-color: rgb(0 0 0 / .97);
}

.width_90 {
	max-width: 90%;
}