.embed {
  padding: 0 $gap;
  height: $comment_height;
  width: 100%;
  box-sizing: border-box;
  background: 50% 50% no-repeat/cover;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 0 0 $gap 0;

  a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 7;
  }

  svg {
    fill: white;
    position: relative;
    z-index: 6;
  }
}

.backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparentize(black, 0.5);
  z-index: 15;
  border-radius: $radius;
  display: flex;
  align-items: center;
  justify-content: center;

  @include can_backdrop {
    background: transparentize(black, 0.3);
    backdrop-filter: blur(5px);
  }
}

.preview {
  padding: 0 $gap $gap / 2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  box-sizing: border-box;
  z-index: 2;

  & > div {
    width: 100%;
    border-radius: $radius;
    position: relative;
  }
}