@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;900&display=swap');

* {margin: 0; padding: 0; font-family: 'montserrat', sans-serif; font-size: 12px; text-transform: uppercase; letter-spacing: 1.97px; line-height: 1.8; opacity: 1;}

body {
	background-image: url("Kawasaki_ZH2_Streetwarior_welos.png");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: 75%;
 	background-color: #b2b7ba;
	background-position: top 5% right 5%}

.welos {
	margin: 6% 5% 0;
	justify-content: left;
	display: grid;
	grid-template-columns: 20% 55%;
	grid-template-rows: auto auto;
	grid-template-areas: 
		"div1 div3"
		"div2 div4";
	}
.text p{margin-bottom: 7%;}
.text h1 {margin-bottom: 7em;}
.div1 img, .div2 img {max-width: 70%; height:auto; margin: 0em 0 3em 0}
.div4 {vertical-align: bottom;}
.contact {vertical-align: bottom; margin-top: 7em;}

@media screen and (max-width: 575px) {
	/* For mobile phones: */
.welos {
	display: grid;
	justify-content: center;
	grid-template-columns: 80%;
	grid-template-rows: auto auto auto auto;
	grid-template-areas:
		"div1"
		"div2"
		"div3"
		"div4";
	margin-bottom: 3em;
	}
.text p{margin: 1em 0 1em;}
.contact {margin: 3em 0 3em 0}
.text h1 {font-weight: 900;font-size: 12px;margin-bottom: 3em;}
.div1 img, .div2 img {max-width: 30%; height:auto; margin: 0em 0 3em 0}
}

.contact
{
	list-style-type: none;
	padding: 0;
	letter-spacing: 35px;
	overflow: hidden;
}
.contact li {display:inline;}

.div1 {grid-area: div1;justify-content: left;}
.div2 {grid-area: div2;justify-content: left;}
.div3 {grid-area: div3;justify-content: left;}
.div4 {grid-area: div4;justify-content: left;}