* {
	box-sizing: border-box;
}
html {
	font-size: 10px;
}
body {
	margin: 0;
	font-size: 1.6rem;
}
img {
	max-width: 100%
}
span {
	font-size: 25px;
	font-weight: bold;
}
.conteiner { 
	width: 1024px;
	margin: 10px auto;
	max-width: 90%;

	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
 }
 .data1, .data2 {
 	width: 50%;
 	display: flex;
 	flex-flow: row nowrap;
 }
 .data3 {
	width: 100%;
	display: flex;
	flex-flow: row wrap;
 }
.content {
 	background: #eee;
 	margin: 10px;
 	padding: 10px;
 }

 @media screen and (orientation: portrait) {
 	.data1 {
 		flex-flow: column-reverse wrap;
 	}
 	.data2 {
 		flex-flow: row-reverse nowrap;
 	}
 }
 @media screen and (max-width: 375px){
 	.data1, .data2, .data3 {
 		width: 100%;
 		flex-flow: row wrap;
 	}
 }