[data-aspect-ratio] {
  display: block;
  max-width: 100%;
  position: relative;
	overflow: hidden;
}
[data-aspect-ratio]:before {
  content: "";
  display: block;
  position: relative;
}
[data-aspect-ratio] > * {
  display: block;
  width: 100%;
  left: 0;
  position: absolute;
  top: 0;
  overflow: hidden;
	margin: 0 auto;
}

[data-aspect-ratio="3:1"]:before {
  padding-top: 33.33%;
}

[data-aspect-ratio="2:1"]:before {
  padding-top: 50%;
}

[data-aspect-ratio="16:9"]:before {
  padding-top: 56.25%;
}

[data-aspect-ratio="3:2"]:before {
  padding-top: 66.66%;
}

[data-aspect-ratio="4:3"]:before {
  padding-top: 75%;
}

[data-aspect-ratio="1:1"]:before {
  padding-top: 100%;
}

[data-aspect-ratio="3:4"]:before {
  padding-top: 133.33%;
}

[data-aspect-ratio="2:3"]:before {
  padding-top: 150%;
}

[data-aspect-ratio="9:16"]:before {
  padding-top: 177.77%;
}

[data-aspect-ratio="1:2"]:before {
  padding-top: 200%;
}

[data-aspect-ratio="1:3"]:before {
  padding-top: 300%;
}