.doctor-department{padding:40px 0}.doctor-department__heading{text-align:left;line-height:normal}.doctor-department__track{--slider-gap:14px}.doctor-department__card{flex-direction:column;display:flex;position:relative}.doctor-department__photo-wrap{background-color:#f0f0f0;border-radius:20px;width:100%;height:444px;position:relative}.doctor-department__photo{transition:opacity .4s;position:absolute;top:0;bottom:0;left:0;right:0}.doctor-department__photo img{border-radius:20px}.doctor-department__photo--default{z-index:1;opacity:1}.doctor-department__photo--hover{z-index:2;opacity:0}.doctor-department__photo-wrap--single .doctor-department__photo--default{transition:opacity .2s ease-in-out}.doctor-department__photo-btn{z-index:3;justify-content:center;align-items:center;width:72px;height:72px;text-decoration:none;transition:transform .2s;display:flex;position:absolute;bottom:-40px;right:-5px}.doctor-department__name{margin:30px 0 0;font-size:18px}.doctor-department__specialty{opacity:.4;margin:12px 0 0;font-size:16px;line-height:1.3}.doctor-modal__dialog{background:var(--color-white);width:100%;max-width:648px;min-height:100vh;margin:0 auto;padding:24px 16px;position:relative;overflow-y:auto}.doctor-modal__close{cursor:pointer;position:absolute;top:8px;right:8px}.doctor-modal__photos{grid-template-columns:1fr 1fr;gap:12px;max-width:500px;margin:0 auto 20px;display:grid}.doctor-modal__photo{aspect-ratio:3/4;border-radius:12px;overflow:hidden}.doctor-modal__name{margin:0 0 8px;font-size:18px}.doctor-modal__specialty{opacity:.4;margin:0 0 20px;font-size:16px;line-height:1.3}.doctor-modal__content{color:#9ba29e;gap:20px;font-size:16px;line-height:1.3;display:grid}.doctor-modal__content strong{color:var(--color-dark);font-weight:400}.doctor-department__name{cursor:pointer}

@media (min-width:639px){.doctor-modal__dialog{border-radius:20px;min-height:auto;margin:50px auto;padding:50px}}
@media (min-width:640px){.doctor-department__track{--slider-gap:25px}}
@media (min-width:640px) and (hover:hover){.doctor-department__card:hover .doctor-department__photo--default{opacity:0}.doctor-department__card:hover .doctor-department__photo--hover{opacity:1}.doctor-department__card:hover .doctor-department__photo-wrap--single .doctor-department__photo--default{opacity:.9}}
@media (min-width:1200px){.doctor-department__track{--slider-gap:35px}}
@media screen and (min-width:1200px){.doctor-department__photo-btn:hover svg>g>path{fill:var(--color-white)}.doctor-department__photo-btn:hover svg path{stroke:var(--color-green)}.doctor-modal__photos{gap:35px;max-width:100%}}