/* ==========================================================================
   Screenshot
   ========================================================================== */

.screenshot {
    border-radius: 6px 6px 4px 4px;                    /* Must be same as browser-frame and img/video */
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06),         /* border */
                0 10px 40px -20px rgba(0, 0, 0, 0.25),
                0 20px 60px -25px rgba(0, 0, 0, 0.2),
                0 20px 20px -30px rgba(0, 0, 0, 0.1),
                0 40px 30px -40px rgba(0, 0, 0, 0.2),
                0 60px 40px -50px rgba(0, 0, 0, 0.1),
                0 16px 32px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}



/* ==========================================================================
   Browser Frame
   ========================================================================== */

.screenshot__browser-frame {
    background: #e5e5e5;
    padding: 0 9px;
    height: 32px;
    display: flex;
    align-items: center;
    border-radius: 6px 6px 0 0; /* Must be same as wrapper */
}



/* ==========================================================================
   Browser Frame Button
   ========================================================================== */

.screenshot__browser-frame-button {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .12);
    margin: 0 2px;
}

.screenshot__browser-frame-button:nth-child(1) {
    background-color: #FF6058;
}

.screenshot__browser-frame-button:nth-child(2) {
    background-color: #FFBE2F;
}

.screenshot__browser-frame-button:nth-child(3) {
    background-color: #27CA41;
}



/* ==========================================================================
   img, video
   ========================================================================== */

.screenshot img,
.screenshot video {
    display: block;
    width: 100%;
    border-radius: 0 0 4px 4px; /* Must be same as wrapper */
}