.webcam-modal[hidden] {
   display: none;
}

.webcam-modal {
   align-items: center;
   bottom: 0;
   display: flex;
   justify-content: center;
   left: 0;
   padding: 1rem;
   position: fixed;
   right: 0;
   top: 0;
   z-index: 3200;
}

.webcam-modal__overlay {
   background-color: #000;
   bottom: 0;
   left: 0;
   opacity: 0.7;
   position: absolute;
   right: 0;
   top: 0;
}

.webcam-modal__dialog {
   background-color: #fff;
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
   max-width: calc(100vw - 2rem);
   padding: 8px;
   position: relative;
   width: 816px;
   z-index: 1;
}

.webcam-modal__content {
   line-height: 0;
}

.webcam-modal__content iframe {
   display: block;
   max-width: 100%;
}

.webcam-modal__close {
   align-items: center;
   background: #1f2933;
   border: 0;
   border-radius: 999px;
   color: #fff;
   cursor: pointer;
   display: flex;
   font-size: 24px;
   height: 44px;
   justify-content: center;
   line-height: 1;
   position: absolute;
   right: -18px;
   top: -18px;
   width: 44px;
}

.webcam-modal-open {
   overflow: hidden;
}

.cam {
   cursor: pointer;
   width: 300px;
}

@media (max-width: 860px) {
   .webcam-modal__dialog {
      width: calc(100vw - 2rem);
   }

   .webcam-modal__content iframe {
      height: min(500px, 60vw);
      width: 100%;
   }

   .cam {
      max-width: 100%;
   }
}