.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  align-items: center;
  justify-content: center;
  z-index: 9999;
  display: none;
  text-decoration: none;
  outline: none;
  backdrop-filter: blur(10px);
}

.modal .d-none {
  display: none
} 

.modal .d-block {
  display: block
}

.modal.show {
display: flex;
}
.modal .modal-content {
  background: white;
  /* padding: 1.2rem; */
  /* border-radius: 1rem; */
  /* max-width: 50%; */
  /* width: 100%; */
  text-align: center;
  position: relative;
  /* margin: 2rem; */
  /* height: 80%; */
  display: flex;
  /* overflow: hidden; */
  max-height: 80%;
  justify-content: center;
  aspect-ratio: 9/16;
  align-items: center;
}
.modal .close-btn {
  position: absolute;
  top: -6px;
  right: -6px;
  cursor: pointer;
  /* font-size: 2rem; */
  text-decoration: none;
  outline: none;
  /* z-index: 100000; */
  /* display: block; */
}

.modal .close-btn:focus {
  outline:none;
}
.modal .close-btn:before {
content: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='-2.4 -2.4 28.80 28.80' fill='none' xmlns='http://www.w3.org/2000/svg' stroke='%23000000' transform='rotate(0)'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0' transform='translate(0,0), scale(1)'%3E%3Crect x='-2.4' y='-2.4' width='28.80' height='28.80' rx='14.4' fill='%23ffffff' strokewidth='0'%3E%3C/rect%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round' stroke='%23CCCCCC' stroke-width='0.336'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Ccircle opacity='0.5' cx='12' cy='12' r='10' stroke='%23755f3e' stroke-width='1.5'%3E%3C/circle%3E%3Cpath d='M14.5 9.50002L9.5 14.5M9.49998 9.5L14.5 14.5' stroke='%23755f3e' stroke-width='1.5' stroke-linecap='round'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");}

.modal video {
display: block;
height: auto;
aspect-ratio: 9/16;
object-fit: scale-down;
width: 100%;
}

.modal .play-btn {
  position: absolute;
  cursor: pointer;
  border-radius: 50%;
  background: rgb(0 0 0 / 60%);
  width: 48px;
  height: 48px;
  align-content: center;
}
.modal .play-btn:before {
  content: url("data:image/svg+xml,%3Csvg width='24px' height='24px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath d='M21.4086 9.35258C23.5305 10.5065 23.5305 13.4935 21.4086 14.6474L8.59662 21.6145C6.53435 22.736 4 21.2763 4 18.9671L4 5.0329C4 2.72368 6.53435 1.26402 8.59661 2.38548L21.4086 9.35258Z' fill='%23ffffff'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  margin-top: 5px;
}
.modal .play-btn.pause {
  position: absolute;
  cursor: pointer;
  border-radius: 50%;
  background: rgb(0 0 0 / 60%);
  width: 48px;
  height: 48px;
  align-content: center;
}
.modal .play-btn.pause:before {
  content: url("data:image/svg+xml,%3Csvg width='24px' height='24px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath d='M2 6C2 4.11438 2 3.17157 2.58579 2.58579C3.17157 2 4.11438 2 6 2C7.88562 2 8.82843 2 9.41421 2.58579C10 3.17157 10 4.11438 10 6V18C10 19.8856 10 20.8284 9.41421 21.4142C8.82843 22 7.88562 22 6 22C4.11438 22 3.17157 22 2.58579 21.4142C2 20.8284 2 19.8856 2 18V6Z' fill='%23ffffff'%3E%3C/path%3E%3Cpath d='M14 6C14 4.11438 14 3.17157 14.5858 2.58579C15.1716 2 16.1144 2 18 2C19.8856 2 20.8284 2 21.4142 2.58579C22 3.17157 22 4.11438 22 6V18C22 19.8856 22 20.8284 21.4142 21.4142C20.8284 22 19.8856 22 18 22C16.1144 22 15.1716 22 14.5858 21.4142C14 20.8284 14 19.8856 14 18V6Z' fill='%23ffffff'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  margin-top: 5px;
}

.modal-open {
overflow: hidden;
outline: 0;
}