@use "./../variables" as *;

.embed--32by9,
.embed--21by9,
.embed--16by9,
.embed--4by3,
.embed--1by1 {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;

  &::before {
    display: block;
    content: "";
  }

  & > * {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
}

@each $key, $value in $embeds {
  .embed--#{$key} {
    &::before {
      padding-top: $value !important;
    }
  }
}