#streamingFrame {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: none;
    display: block;
    border-radius: 8px;
}

.profile-picture-container.has-streaming{
    transition: all 200ms ease-in-out;
}

.profile-picture-container.has-streaming .streaming-container {
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

.profile-picture-container:not(.has-streaming) .profile-picture .streaming-container{
    display: none;
}

.profile-picture-container.has-streaming .profile-picture{
    z-index: 1;
    transition: all 200ms ease-in-out;
}

.profile-picture-container.has-streaming .profile-picture img{
    display: none;
}

.profile-picture-container.has-streaming .profile-picture  .profile-picture__status{
    bottom: -22px;
}

.profile-picture-container.has-streaming.expand .profile-picture{
    width: 100%;
    height: auto;
    
}


@media (min-width: 300px) and (max-width: 480px){

    .profile-picture-container.has-streaming{
        width: 320px;
        position: absolute;
        left: calc((100% - 320px) / 2);
        top: calc(100% - (320px * 0.5625) - 250px);
    }

    .profile-picture-container.has-streaming.expand{
        top: 20px;
    }

    .profile-picture-container.has-streaming .profile-picture{
        height: auto;
        width: 100%;
        margin-left: 0;
    }
    .profile-picture-container.has-streaming.expand .profile-picture{
        width: calc(100vw - 10px);
        height: auto;
        margin-left: calc((-1) * ((100vw - 100%) / 2 - 5px) );
    }
    
    .profile-picture-container.has-streaming + .profile-meta + .profile-btn{
        width: 320px;
        left: calc((100% - 320px) / 2);
        bottom: 0px;
        transform: none;
        margin-left: 0;
    }

    .profile-picture-container.has-streaming + .profile-meta{
        display: inline-block;
        position: absolute;
        /* left: 185px; */
        left: calc((100% - 320px) / 2);
        bottom: 75px;
        height: 110px;
        width: 320px;
    }
    .profile-picture-container.has-streaming + .profile-meta .profile-meta__heading,
    .profile-picture-container.has-streaming + .profile-meta .profile-meta__price{
        width: 100%;
        text-align: center;
    }

    .profile-picture-container.has-streaming + .profile-meta .profile-meta__heading{
        text-align: center;
        font-size: 36px;
    }


}
@media (min-width: 480px) and (max-width: 766px){

    .profile-picture-container.has-streaming{
        width: 320px;
        position: absolute;
        left: calc((100% - 320px) / 2);
        top: calc(100% - (320px * 0.5625) - 210px);
    }

    .profile-picture-container.has-streaming .profile-picture{
        height: auto;
        width: 100%;
        margin-left: 0;
    }

    .profile-picture-container.has-streaming.expand{
        top: 20px;
    }

    .profile-picture-container.has-streaming.expand .profile-picture{
        width: calc(100vw - 30px);
        height: auto;
        margin-left: calc((-1) * ((100vw - 100%) / 2 - 15px) );
    }
    
    .profile-picture-container.has-streaming + .profile-meta + .profile-btn{
        width: 320px;
        left: calc((100% - 320px) / 2);
        bottom: 5px;
        transform: none;
        margin-left: 0;
    }

    .profile-picture-container.has-streaming + .profile-meta{
        display: inline-block;
        position: absolute;
        left: calc((100% - 320px) / 2);
        bottom: 90px;
        width: 320px;
    }
    .profile-picture-container.has-streaming + .profile-meta .profile-meta__heading,
    .profile-picture-container.has-streaming + .profile-meta .profile-meta__price{
        width: 100%;
        text-align: center;
    }

    .profile-picture-container.has-streaming + .profile-meta .profile-meta__heading{
        text-align: center;
        font-size: 36px;
    }
    
}

@media (min-width: 768px) and (max-width: 1024px){

    .profile-picture-container.has-streaming{
        width: 457px;
        position: absolute;
        left: calc((100% - 457px) / 2);
        top: calc(100% - (457px * 0.5625) - 250px);
        margin-bottom: 0;
        margin-top: 0;
    }
    
    .profile-picture-container.has-streaming.expand{
        top: 20px;
    }

    .profile-picture-container.has-streaming .profile-picture{
        height: auto;
        width: 100%;
        margin-left: 0;
    }
    .profile-picture-container.has-streaming.expand .profile-picture{
        width: calc(100vw - 30px);
        height: auto;
        margin-left: calc((-1) * ((100vw - 100%) / 2 - 15px) );
    }
    
    .profile-picture-container.has-streaming + .profile-meta + .profile-btn{
        max-width: 457px;
        left: calc((100% - 457px) / 2);
        bottom: 0px;
        margin-bottom: 0;
        margin-top: 0;
    }

    .profile-picture-container.has-streaming + .profile-meta{
        display: inline-block;
        position: absolute;
        left: calc((100% - 457px) / 2);
        bottom: 105px;
        height: 110px;
        width: 457px;
        margin-bottom: 0;
        margin-top: 0;
    }
    .profile-picture-container.has-streaming + .profile-meta .profile-meta__heading,
    .profile-picture-container.has-streaming + .profile-meta .profile-meta__price{
        width: 100%;
        text-align: center;
    }
    
}

@media (min-width: 1025px){
    
    .profile-picture-container.has-streaming {
        position: relative;
        height: calc(500px * 0.5625);
        margin-top: 0;
    }

    .profile-picture-container.has-streaming .profile-picture {
        height: auto;
        width: 500px;
    }

    .profile-picture-container.has-streaming.expand .profile-picture {
        position: absolute;
    }
}


@media (orientation: landscape) and (max-width: 1024px) {
    .is-streaming{
        min-height: 715px;
    }

    .profile-picture-container.has-streaming.expand .profile-picture {
        width: min(calc((100vh - 60px) / 0.5625), calc(100vw - 30px));
        height: auto;
        margin-left: calc((-1) * (((min(calc((100vh - 60px) / 0.5625), calc(100vw - 30px))) - 100%) / 2));
        top: -20px;
    }

    .profile-picture-container.has-streaming.expand .profile-picture iframe#streamingFrame{
        border-radius: 2px;
    }
}