✏️ Editing: _heading.scss Writable

.ova-heading{
	text-align: left;

.sub-title-wrapper{
		display: inline-flex;
		padding: 0 0 3px 0;
		
		&.underline {
			background-image: url('assets/img/underline-sub-title.svg');
			background-size: contain;
			background-position: bottom left;
			background-repeat: no-repeat;
		}
		.prefix{
			color: var(--primary);
			font-size: 20px;
			margin: 0 4px 0 0; 
		}
		.sub-title{
			font-size: 16px;
			font-weight: 600;
			margin: 0;
		}
	}

.title{
		@include transaction( all, 0.3s, linear );
		font-size: 90px;
		font-weight: 600;
		line-height: 1.2;
		margin: 14px 0 0 0;
		white-space: pre-line;
		position: relative;
		z-index: 1;

@media(max-width: 1400px){
			font-size: 70px;
		}
		@media(max-width: 1024px){
			font-size: 60px;
		}
		@media(max-width: 767px){
			font-size: 45px;
		}

&:hover{
			@include transaction( all, 0.3s, linear );
		}

&.text-stroke-white{
			.word{
				text-shadow: -1px -1px 0 var(--heading), 1px -1px 0 var(--heading), -1px 1px 0 var(--heading), 1px 1px 0 var(--heading);
			}
		}
		&.text-stroke-black{
			.word{
				text-shadow: -1px -1px 0 var(--primary-background), 1px -1px 0 var(--primary-background), -1px 1px 0 var(--primary-background), 1px 1px 0 var(--primary-background);
			}
		}

.word{
			background-image: url('assets/img/underline-title.svg');
			background-position: bottom left 20px;
			background-repeat: no-repeat;
			color: var(--primary);

@media(max-width: 1024px){
				background-position: bottom left;
				background-size: contain;
			}
		}

&.no-shape-underline{
			.word{
				background-image: none;
			}
		}

a{
			@include transaction( all, 0.3s, linear );
			color: var(--heading);

&:hover{
				@include transaction( all, 0.3s, linear );
				color: var(--text);
			}
		}

img{
			width: 169px;
			min-width: 169px;
			height: 69px;
			object-fit:cover;
			border: 3px solid var(--primary);
			border-radius: 34.5px;
			margin: 0 0 -7px 20px;

@media(max-width: 767px){
				width: 110px;
				min-width: 110px;
				height: 45px;
			}
		}
	}

.description{
		font-weight: 500;
		color: var(--heading);
		margin: 16px 0 0 0;
		white-space: pre-line;
	}

.author{
		text-align: right;
		margin: 0;

.divider{
			width: 26px;
			height: 2px;
			background-color: var(--primary);
			display: inline-block;
			vertical-align: middle;
		}

.author-prefix{
			color: var(--primary);
			font-size: 16px;
			margin: 0 5px 0 15px;
		}

.text{
			font-weight: 600;
			font-size: 16px;
			color: var(--heading);
		}
	}

&.template2{
		.sub-title-wrapper{
			padding: 0;

.sub-title{
				text-transform: uppercase;
			}

&.underline {
				background-image:none;
				border-bottom: 1px solid var(--primary);
			}
			
		}
		.title{
			text-transform: uppercase;
			font-size: 55px;
			margin: 12px 0 0 0;

@media(max-width: 1024px){
				font-size: 40px;
			}

.word{
				background-image: none;
			}

img{
				display: none;
			}
		}
	}

&.template3{
		text-align: center;

.sub-title-wrapper{
			padding: 0;

.sub-title{
				text-transform: uppercase;
				line-height: 1.8;
			}
			&.underline {
				background-image:none;
				border-bottom: 1px solid var(--primary);
			}
		}

.title{
			text-transform: uppercase;
			font-size: 80px;
			font-weight: 500;
			margin: 13px 0 0 0;

@media(max-width: 1400px){
				font-size: 60px;
			}
			@media(max-width: 1024px){
				font-size: 50px;
			}
			@media(max-width: 767px){
				font-size: 40px;
			}

.word{
				background-image: none;
			}
		}

.button-booking{
			@include transaction( all, 0.3s, linear );
			display: inline-flex;
			justify-content:center;
			align-items:center;
			flex-direction:column;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			width: 170px;
			height: 170px;
			border-radius: 50%;
			background-color: var(--primary);
			color: var(--heading);
			border: 1px solid transparent;
			z-index: 2;

@media(max-width: 1024px){
				width: 150px;
				height: 150px;
			}

&:hover{
				@include transaction( all, 0.3s, linear );
				background-color: var(--heading);
				color: var(--primary);
				border-color: var(--primary);
			}

.text-booking{
				font-weight: 600;
				font-size: 16px;
				line-height: 1.2;
				text-transform: uppercase;
				margin: 15px 0 5px 0;
			}

i{
				display: inline-flex;
				font-size: 20px;
			}
		}
	}

&.template4{
		.sub-title-wrapper{
			
			.sub-title{
				color: #171313;
			}
			&.underline {
				background-size: 100%;
			}
		}
		.title{
			text-transform: uppercase;
			font-size: 65px;
			color: #191E3C;

@media(max-width: 1024px){
				font-size: 50px;
			}
			@media(max-width: 767px){
				font-size: 40px;
			}

a{
				color: #191E3C;

&:hover{
					color: var(--text);
				}
			}

.word{
				background-image: none;
				position: relative;
				color: inherit;

&:after{
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					width: 100%;
					background-image: url('assets/img/background-circle-heading.png');
					background-size: contain;
					background-position: center;
					background-repeat: no-repeat; 
				}
			}

img{
				display: none;
			}
		}
		.description{
			color: #171313;
		}
	}

&.template5{
		.title{
			font-size: 42px;
		}
		.background-text{
			font-size: 40px;
			font-weight: 700;
			line-height: 1.5;
			color: #ffffff0d;
			position: absolute;
			top: 36px;
			left: 50%;
			transform: translateX(-50%);

&.background-text-stroke-white{
				text-shadow: -1px -1px 0 var(--heading), 1px -1px 0 var(--heading), -1px 1px 0 var(--heading), 1px 1px 0 var(--heading);
				color: var(--background);
				opacity: 0.09;
			}
			&.background-text-stroke-black{
				text-shadow: -1px -1px 0 var(--primary-background), 1px -1px 0 var(--primary-background), -1px 1px 0 var(--primary-background), 1px 1px 0 var(--primary-background);
				color: var(--heading);
				opacity: 0.09;
			}

&.alignment-left{
				right: unset;
				left: 0;
				transform: translateX(0);
			}
			&.alignment-right{
				left: unset;
				right: 0;
				transform: translateX(0);
			}
		}
	}
}

🔐 Sid Gifari File Manager Pro