HEX
Server: Apache
System: Linux v38079.2is.nl 3.10.0-1160.119.1.el7.x86_64 #1 SMP Tue Jun 4 14:43:51 UTC 2024 x86_64
User: democfellows (10015)
PHP: 8.1.34
Disabled: opcache_get_status
Upload Files
File: /var/www/vhosts/creativefellows.nl/nomor.creativefellows.nl/public/scss/_impression.scss
/*
 * HOMEPAGE IMAGES 
 */
.image-impression{
		
	margin:0;
	padding:0;
	max-width:none;
	margin-top:1.5rem;

	.image{
		display:block;
		float:left;
		position:relative;
		
		
	}
	
	.image__multiply{mix-blend-mode: darken;}
	
	.image__one{border-left:solid 3rem $white;}
	.image__two{margin-top:1rem;padding-left:40%;}
	.image__four{padding-left:3rem;width:60%;}
			
	.image__three{width:50%;padding-left:1rem;padding-top:70%;}
	.image__five{padding-left:1rem;margin-top:1rem;}
	.image__five::after{
		content:"";
		position:absolute;
		top:0;
		right:0;
		bottom:0;
		left:-50%;
		background:$primary-color;
		mix-blend-mode: multiply;
	}
	
	.image__five::before{
		content:"";
		position:absolute;
		top:50%;
		margin-top:-1rem;
		left:-50%;
		right:0;		
		height:2rem;
		z-index:100;
		background: url(/images/product/nomor-1605-white.svg) no-repeat 50% 50%;
	}
	
	@include breakpoint(small only) {
		.image{margin:0.5rem 0;width:auto;}
		.image__one{border:none;}
		.image__two{padding:0;}
		.image__four{}
		
		.image__three{padding:0;}
		.image__five{
			padding:0;
			&::before{left:0;}
			&::after{left:0;}
		}
		

	}	
	
}

.image-impression__inspiration{
	position:relative;
	margin-top:3rem;
	margin-bottom:3rem;
	
	.image__one{}
	.image__three{width:100%;padding-left:1rem;padding-right:1.5rem;padding-top:0;transform:translateY(4.5rem);}
	
	
	.image__two{padding-left:0;width:100%;}
	.image__four{
		margin-top:1rem;width:80%;margin-left:20%;padding-left:0;
		a{position:relative;display:block;}
	}
	.image__five{width:100%;margin-top:1rem;}
	.image__five::after,
	.image__five::before{display:none;}
	
	.image__six{margin:12rem 0 0 1rem;border-right:solid 1.5rem $white;}
	
	@include breakpoint(small only) {
		.image{margin:0.5rem 0;width:auto;}
		.image__one{border:none;}
		.image__two{padding:0;}
		.image__three{padding:0;transform:none;}
		.image__four{}
		.image__five{padding:0;}
		.image__six{border:none;}

	}	
	
}