.component__doctor-header{
  margin-bottom:16px;
}
@media screen and (min-width:768px){
  .component__doctor-header{
    margin-bottom:30px;
  }
}
@media screen and (min-width:1200px){
  .component__doctor-header{
    margin-bottom:40px;
  }
}

.doctor-card{
  display:flex;
  flex-direction:column;
}

.doctor-card__image-container{
  align-items:flex-end;
  background-position:50%;
  background-repeat:no-repeat;
  background-size:cover;
  border-radius:.625rem;
  cursor:pointer;
  display:flex;
  height:300px;
  justify-content:center;
  margin-bottom:8px;
  position:relative;
  width:100%;
}
.doctor-card__image-container:not(.doctor-card__link){
  cursor:default;
}
@media screen and (min-width:768px){
  .doctor-card__image-container{
    height:758px;
  }
}
@media screen and (min-width:1200px){
  .doctor-card__image-container{
    height:490px;
  }
}

.doctor-card__photo-wrapper{
  display:flex;
  height:90%;
  justify-content:center;
  position:relative;
  width:100%;
}

.doctor-card__photo-wrapper .media-image{
  height:100%;
  -o-object-fit:contain;
     object-fit:contain;
  -o-object-position:bottom;
     object-position:bottom;
  width:100%;
}
.doctor-card__video-btn{
  background:none;
  border:none;
  cursor:pointer;
  height:-moz-fit-content;
  height:fit-content;
  padding:0;
  position:absolute;
  right:20px;
  top:20px;
  transition:transform .2s;
  z-index:20;
}

.doctor-card__video-btn:hover{
  transform:scale(1.1);
}

.doctor-card__link{
  display:block;
  height:100%;
  left:0;
  position:absolute;
  top:0;
  width:100%;
  z-index:10;
}

.doctor-card__rating{
  align-items:center;
  background-color:#fff;
  border-radius:2.5rem;
  bottom:.75rem;
  display:flex;
  flex-direction:row;
  font-size:14px;
  gap:4px;
  justify-content:space-between;
  left:.75rem;
  padding:8px 14px;
  position:absolute;
}
.doctor-modal{
  align-items:center;
  background:rgba(0,0,0,.8);
  display:none;
  height:100%;
  justify-content:center;
  left:0;
  position:fixed;
  top:0;
  width:100%;
  z-index:10000;
}
.doctor-modal__content{
  background:#fff;
  border-radius:8px;
  max-width:800px;
  padding:20px;
  position:relative;
  width:90%;
  z-index:10001;
}

.doctor-modal:before{
  content:"";
  height:100%;
  left:0;
  position:fixed;
  top:0;
  width:100%;
  z-index:-1;
}

.doctor-modal__close{
  background:none;
  border:none;
  color:#fff;
  cursor:pointer;
  font-size:35px;
  position:absolute;
  right:0;
  top:-40px;
}

.doctor-modal__video{
  height:0;
  overflow:hidden;
  padding-bottom:56.25%;
  position:relative;
}

.doctor-modal__video iframe{
  border:none;
  height:100%;
  left:0;
  position:absolute;
  top:0;
  width:100%;
}
body.modal-open{
  overflow:hidden;
}