.work-list{& .work-logo{max-width:200px;max-height:60px}& a{text-decoration:none;transition:all .3s cubic-bezier(.4,0,.2,1);@media (width>=50em){min-height:37rem}&:hover{--tw-ring-offset-shadow:0 0 0 0px #fff;--tw-ring-shadow:0 0 0 calc(.9rem + 0px)#32333e;--tw-shadow:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);& figure{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1.02;--tw-scale-y:1.02;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}}}& figure{transition:all .15s cubic-bezier(.4,0,.2,1)}& .work-content{--color-text:#fff;@media (width>=50em){max-width:50ch}}& .button{--color-text:white;--color-bg:transparent;border-radius:var(--border-radius-xl);padding-inline:calc(var(--space-md)*1.2);padding-block:calc(var(--space-sm)*1.7);border-color:var(--color-text);&:hover{--color-text:white;--color-bg:transparent}}}.work-list2{&>*+*{margin-top:var(--space-xxl)}& figure{aspect-ratio:1;& img{object-fit:cover;width:100%;height:100%;display:block}}& .work-content{border-block-start:var(--border-width-sm)solid var(--color-border);justify-content:center;gap:var(--space-lg);flex-direction:column;height:100%;display:flex}}.work-logo{max-width:250px;max-height:80px}.work-page{--border-radius:calc(var(--border-radius-xl)*1.2);--border-container:1rem solid #0000001a;&>header{background-color:var(--color-header-bg,var(--color-bg));padding-block:0 var(--space-xl)}& .video{border:var(--border-container);border-radius:var(--border-radius);margin-block:0;line-height:0}& figure{line-height:0;overflow:hidden;&[card-type=""]{border:var(--border-container);border-radius:var(--border-radius)}&[card-type=browser]{--bar-height:2em;--border-radius:10px;--browser-color-bg:#f4f4f4;background-color:var(--browser-color-bg);border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius);user-select:none;box-shadow:var(--shadow-lg);padding-block-start:var(--bar-height);position:relative;& .browser-bar{background-color:var(--browser-color-bg);height:var(--bar-height);padding-inline:var(--space-sm);align-items:center;gap:6px;display:flex;position:absolute;top:0;left:0;right:0;& span{--control-bg-color:#dedede;background-color:var(--control-bg-color);border-radius:100%;width:12px;height:12px;&:first-child{--control-bg-color:#fd5b5f}&:nth-child(2){--control-bg-color:#fac801}&:nth-child(3){--control-bg-color:#36c85b}}}}}& .work__body{padding-block-start:var(--space-md);&>:where(h3,div,figure,form,img,picture){margin-block-start:var(--space-xl)}&>:where(p,ul,ol,dl,pre,details,h4,h5,h6){margin-block-start:1lh}&>:where(p,ul,ol){font-size:var(--font-size-base)}&>:where(p,h3,ul,ol){max-width:50rem;margin-inline:auto}}&>footer{background-color:var(--color-text)}}