@import "../../common/constants";

.InstagramWindow {
  .photo-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-shrink: 1;
    overflow-y: auto;
    margin-bottom: -3px;

    .photo {
      display: block;
      flex-basis: calc(33.33% - 2px);
      height: auto;
      background-size: cover;
      background-position: center;
      margin-bottom: 3px;

      .ratio {
        width: 100%;
        height: auto;
      }
    }
  }

  .embed-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    overflow-y: auto;
    background-color: rgba(black, .5);
    visibility: hidden;
    opacity: 0;
    transition: visibility $anim-duration, opacity $anim-duration;

    &.opened {
      visibility: inherit;
      opacity: 1;
    }

    iframe {
      width: calc(100% - 4rem) !important;
      margin: 2rem !important;
      box-shadow: 0 0 48px rgba(black, .3) !important;
    }
  }
}
