.embed-component {
  margin-bottom: 2rem;
}

.embed-component__content {
  position: relative;
  width: 100%;
}

.embed-component__content.facebook iframe {
  width: 100%;
  margin: 0 auto !important;
}

/* Youtube. */
.embed-component__content.youtube {
  position: relative;
  background-color: lightgrey;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}
/* Then style the iframe to fit in the container div with full height and width */
.embed-component__content.youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* Facebook. */
.embed-component__content.facebook {
  position: relative;
  background-color: lightgrey;
  width: 100%;
  padding-top: 84%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}
.embed-component__content.facebook iframe {
  width: 100%;
  position: absolute;
  margin: 0 auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  display: block;
}

.embed-component__content.linkedin iframe {
  width: 100%;
  margin: auto;
  position: relative;
  display: block;
  height: revert-layer;
}

/* Instagram. */
.embed-component__content.instagram iframe,
iframe.instagram-media {
  width: 100% !important;
  min-width: initial !important;
  margin: 0 auto !important;
  position: relative;
  display: block;
}

/* Twitter. */
.twitter-tweet-rendered {
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .embed-component__content.linkedin iframe,
  .embed-component__content.facebook iframe {
    width: 100%;
  }
}