/* Instagram owns its iframe height. This dedicated detail surface deliberately
   does not inherit any module image/video shell class. */
.ms-external-media--instagram-detail {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  position: static !important;
  overflow: visible !important;
  contain: none !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.ms-external-media--instagram-detail::before,
.ms-external-media--instagram-detail::after {
  content: none !important;
  display: none !important;
}

.ms-external-media--instagram-detail .instagram-media {
  display: block !important;
  box-sizing: border-box !important;
  width: min(100%, 540px) !important;
  max-width: 540px !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: visible !important;
}

.ms-external-media--instagram-detail iframe {
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  max-width: 540px !important;
  min-width: 0 !important;
  max-height: none !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: initial !important;
  overflow: visible !important;
}

/* A detail card containing Instagram must grow with the official embed. */
body :is(
  .profile-detail-card,
  .detail-page-card,
  .blog-detail-content-card,
  .detail-media-card
):has(.ms-external-media--instagram-detail) {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  overflow: visible !important;
}

@media (min-width: 641px) {
  .ms-external-media--instagram-detail {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    text-align: center !important;
  }

  .ms-external-media--instagram-detail > *,
  .ms-external-media--instagram-detail .instagram-media,
  .ms-external-media--instagram-detail iframe {
    justify-self: center !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }
}

@media (max-width: 640px) {
  .ms-external-media--instagram-detail {
    width: 100% !important;
    max-width: 100% !important;
  }

  .ms-external-media--instagram-detail .instagram-media,
  .ms-external-media--instagram-detail iframe {
    width: 100% !important;
    max-width: 100% !important;
  }
}