.media1 {
  background-image: url("../images/Flexbox/001.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
  min-height: 280px;
}
.media2 {
  min-height: 280px;
  background-image: url("../images/Flexbox/002.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
}
.media3 {
  min-height: 280px;
  background-image: url("../images/Flexbox/003.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
}
.card1 {
  display: flex;
  flex-wrap: wrap;
  background-color: #ffda81;
  margin: var(--card-margin);
	
}
.card1 > * {
  flex: 1 1 280px;
}
.card2 {
  display: flex;
  flex-wrap: wrap;
  background-color: #f8be89;
  margin: var(--card-margin);
	
}
.card2 > * {
  flex: 1 1 280px;
}
.card3 {
  display: flex;
  flex-wrap: wrap;
  background-color: #ffc560;
  margin: var(--card-margin);
	
}
.card3 > * {
  flex: 1 1 280px;
}
:root {
  --card-margin: 1em;
}
.container {
  display: flex;
  flex-wrap: wrap;
}
.container > * {
  flex: 1 1 calc(280px + var(--card-margin));
}
.content {
  align-self: center;
  padding: 1em 2em;
}