.media1 {
  background-image: url("../images/vierer-Flexbox/01.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 480px;
}
.media2 {
  background-image: url("../images/vierer-Flexbox/02.jpg");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  height: 480px;
}
.media3 {
  background-image: url("../images/vierer-Flexbox/03.jpg");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  height: 480px;
}


.card1 {
  display: flex;
  flex-wrap: wrap;
  background: radial-gradient(ellipse at center, #fdffff 45%,#e6f8fd 93%,#e1ffff 96%,#e1ffff 100%,#bee4f8 100%,#c8eefb 100%,#b1d8f5 100%);
  margin: var(--card-margin);
	 border: 10px solid #fff;
  -webkit-box-shadow: 1px 1px 2px #222;
  -moz-box-shadow: 1px 1px 2px #222;
  box-shadow: 0 8px 10px -6px #222;
}
.card1 > * {
  flex: 1 1 250px;
}
.card2 {
  display: flex;
  flex-wrap: wrap;
  background: radial-gradient(ellipse at center, #fdffff 45%,#e6f8fd 93%,#e1ffff 96%,#e1ffff 100%,#bee4f8 100%,#c8eefb 100%,#b1d8f5 100%);
  margin: var(--card-margin);
	 border: 10px solid #fff;
  -webkit-box-shadow: 1px 1px 2px #222;
  -moz-box-shadow: 1px 1px 2px #222;
  box-shadow: 0 8px 10px -6px #222;
}
.card2 > * {
  flex: 1 1 250px;
}
.card3 {
  display: flex;
  flex-wrap: wrap;
  background: radial-gradient(ellipse at center, #fdffff 45%,#e6f8fd 93%,#e1ffff 96%,#e1ffff 100%,#bee4f8 100%,#c8eefb 100%,#b1d8f5 100%);
  margin: var(--card-margin);
	 border: 10px solid #fff;
  -webkit-box-shadow: 1px 1px 2px #222;
  -moz-box-shadow: 1px 1px 2px #222;
  box-shadow: 0 8px 10px -6px #222;
}
.card3 > * {
  flex: 1 1 250px;
}


:root {
  --card-margin: 1em;
}
.container_dreier {
	
width: 100%;
  display: flex;
  flex-wrap: wrap;
	
}
.container_dreier > * {
	
  flex: 1 1 calc(250px + var(--card-margin));
}
.content {
  align-self: center;
  padding: 1em 2em;
}