[data-module=before-and-after]{display:grid;gap:48px;grid-template-columns:repeat(2,1fr)}[data-module=before-and-after] .patient{display:grid;gap:48px;grid-template-columns:repeat(1,1fr);position:relative}[data-module=before-and-after] .patient div{aspect-ratio:.82;overflow:hidden;position:relative;width:100%}[data-module=before-and-after] .patient img{bottom:0;height:100%;left:0;object-fit:cover;object-position:top;opacity:.5;position:absolute;right:0;top:0;transition:opacity .2s ease-in-out;width:100%}[data-module=before-and-after] .patient:hover img{opacity:1}[data-module=before-and-after] .patient p{bottom:0;bottom:24px;color:#fff;font-size:24px;left:24px;opacity:0;position:absolute;transition:opacity .2s ease-in-out}[data-module=before-and-after] .patient:hover p{opacity:.5}.modal{background-color:#000;bottom:0;left:0;position:fixed;right:0;top:0;z-index:9999}.modal,.modal h3{color:#fff}.modal__inner{display:flex;flex-direction:column;gap:1rem;height:100%;margin:0 auto;max-width:960px;overflow:hidden;padding:48px}.modal__inner-photos{display:grid;flex-grow:1;gap:24px;grid-template-columns:repeat(2,1fr);position:relative}.modal__inner-image{background-position:50%;background-repeat:no-repeat;background-size:contain;height:100%;max-height:100%;max-width:100%;transition:opacity .2s ease-in-out;width:100%}.modal__inner-photos img{display:none}.modal__inner .meta{align-items:center;display:flex;justify-content:space-between}.modal__inner .meta button{align-items:center;background-color:#000;border:2px solid #fff;border-radius:50%;color:#fff;cursor:pointer;display:flex;height:50px;justify-content:center;width:50px}.modal__inner .meta button:hover{opacity:.5}