.base
	.picture
		.name Athos
		.pictureimg
	.picture
		.name Porthos
		.pictureimg
	.picture
		.name Aramis
		.pictureimg

body{
	background-color: #007f5f;
	.base{
		width:100%;
		height:100vh;
		display:flex;
		flex-direction:row;
		align-items: center;
  	justify-content: space-around;
		@media screen and (max-width:500px){
			flex-direction:column;
		}
		.picture{
			--border-color: #ffff3f;
			border-radius:10px;
			border:10px solid;
			border-color: var(--border-color);
			width:30%;
			height:50vh;
			position:relative;
			overflow:hidden;
    	transition: all 900ms cubic-bezier(0.075, 0.82, 0.165, 1);
			box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
			
			.name { 
				--name-size: 5vw;
				color: #ffff3f;
				position: absolute;
				bottom: 0;
				left: .5rem;
				font-family: 'Kaushan Script', cursive;
				margin:0;
				z-index:9;
				font-size: var(--name-size);
				text-shadow: 2px 2px 4px #000000;
				transition: font-size 300ms ease-in-out;
			}
			
			.pictureimg {
				width:100%;
				height:100%;
				background-size:cover;
				background-position:center;
				filter: grayscale(100%);
  			transition: transform 9000ms cubic-bezier(0.075, 0.82, 0.165, 1), filter 900ms cubic-bezier(0.075, 0.82, 0.165, 1);
			}
			
			&:nth-child(1){
				.pictureimg	{background-image:url('https://images.unsplash.com/photo-1517423440428-a5a00ad493e8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=387&q=80');}
				
				&:focus,
				&:hover {
					--border-color: #dddf00;
				}
			}
			
			&:nth-child(2){
				.pictureimg {background-image:url('https://images.unsplash.com/photo-1517423738875-5ce310acd3da?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=405&q=80');}
				
				&:focus,
				&:hover {
					--border-color: #bfd200;
				}
			}
			
			&:nth-child(3){
				.pictureimg {background-image:url('https://images.unsplash.com/photo-1529088363398-8efc64a0eb95?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=424&q=80');}
				
				&:focus,
				&:hover {
					--border-color: #80b918;
				}
			}
			
			@media screen and (max-width:500px){
				width:80%;
				height:25vh;
				margin-bottom:20px;
			}
			
			&:focus,
			&:hover{
				
				.name {
					--name-size: 9vw;
				}
				.pictureimg{
					filter: grayscale(0%);
					transform: scale(1.2);
				}
			}
			
		}
	}
}