* {

    margin: 0; padding: 0; border: 0; box-sizing: border-box;

}

:root {

    font-size: 62.5%;
/*  font-family: 'Instrument Serif', serif;
    font-family: 'Playfair Display', serif; */
}

body {

    background-color: hsla(200, 80%, 80%, 1);
    color: hsla(150, 50%, 100%, 1);
    
}

h1 {
font-family: 'Open Sans', sans-serif;
font-size: 4rem;
transform: scaleX(-1);
align-self: center;
padding-left: 3%;


}
header {
    
    background-image: linear-gradient(to left,hsla(200,100%,2%,.9) 30%,hsla(200,100%,.1%,0)) , url(hills.jpg);
    height: 300px;
    background-size: 80%, 100%;
    background-position: right center, center;
    transform: scaleX(-1);
    background-repeat: no-repeat;
    display: flex;
    justify-content: right;
    position: relative;
    
}

header p {

font-size: 1.8rem;
position: absolute;
bottom: 0px; right: 0px;
color: hsla(150, 50%, 100%, 1);
transform: scaleX(-1);
padding-left: 3%; padding-bottom: 3%;
font-family: 'Open Sans', sans-serif;
}

#examples {

border: 4px solid grey;
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
gap: 12px;
padding: 12px;


}

.example_item a {

display: block;
width: 100%;
height: 100%;

}

.example_item {

    border: 4px solid grey;
    min-height: 260px;
    min-width: 350px;
    flex: 1 0 25%;
    
}

#examples figure {
    background-size: cover;
    background-position: center;
    transition: all .5s ease-in-out;
    filter: grayscale(100%);
}

#examples figure:hover {

    background-size: 140%;
    filter: grayscale(0%);
}


#examples figure:nth-child(1) {

background-image: url(watch.jpg);

}

#examples figure:nth-child(2) {

    background-image: url(headphones.jpg);
    
    }

    #examples figure:nth-child(3) {

        background-image: url(bike.jpg);
        
        }

        #examples figure:nth-child(4) {

            background-image: url(banana.jpg);
            
            }
        #examples figure:nth-child(4) a {

            text-align: center;
            color: yellow;
            font-size: 2em;
            font-style: italic;
            text-decoration: none;
            font-weight: bold;
            line-height: 30px;
            text-shadow: 1px 1px 2px black;
            

        }

        #examples figure:nth-child(4) figcaption {

            transform: translateX(-5000px);
            transition: all .4s ease-in-out;

        }

        #examples figure:nth-child(4):hover figcaption {

            transform: translateX(0px);

        }

            #examples figure:nth-child(5) {
                filter: none;
                background-image: url(shoe.jpg);
                
                }
                #examples figure:nth-child(5):hover {

                    background-image: url(shoe2.jpg);
                    background-size: 100%;

                }


                #examples figure:nth-child(6) {

                    background-image: url(camera.jpg);
                    
                    }