.logo{
	height: 40%;
	width: 40%;
}

.condom-container{
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-columns: 40% 60%;
	grid-template-rows: 100%;
	place-items: center;
	position: relative;
}

.condom-3d-model{
	height: 100%;
	width: 100%;
}

.condom-3d-container{
	width: 100%;
	height: 90vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

.condom-card-container{
	position: relative;
	height: 30vh;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 22px;
	padding-left: max(22px, env(safe-area-inset-left));
	padding-right: max(22px, env(safe-area-inset-right));
}

.condom-text-bg{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	color: rgba(255, 255, 255, 0.2);
	font-size: 15vw;
	display: flex;
	justify-content: center;
	align-items: center;
}

.category-title{
	width: 100%;
	text-align: left;
}

.product-subtitle{
	width: 100%;
	display: flex;
	justify-content: space-between;
}

.product-img{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.product-img img{
	width: 69%;
	height: auto;
}

.product-card{
	border-radius: 25px;
	padding: 20px;
	transition: all 200ms cubic-bezier(0.2, 0, 0, 1);
}

.product-card:hover{
	transform: translateY(-5px);
	cursor: pointer;
	box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.main-title {
	position: absolute;
	bottom: 0;
	font-size: 10vw;
	font-weight: 400;
	margin: 0;
	left: 50%;
	transform: translateX(-50%);
}

@media screen and (min-height: 859px){
	.main-title {
		font-size: 140px;
	}
}

.art-img-container{
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	place-items: center;
}
.art-img-container img{
	width: 100%;
	height: auto;
}