.pills{position:relative}.pills>div img{max-width:100%;border-radius:15px;object-fit:cover}.pills .pills--container .pill{border-radius:100px;background:#fff;text-transform:uppercase;display:flex;align-items:center;gap:1.2rem;color:#000;letter-spacing:.28px;font-size:18px;position:absolute;top:0;padding:.8rem 1.5rem .8rem .8rem;transition:all .1s}.pills .pills--container .pill:hover{cursor:pointer;gap:1.8rem}.pills .pills--container .pill p{padding:0;margin:0;line-height:0}.pills dialog{width:980px;max-width:100%;background:#f2f2f3;z-index:1000;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);border:none;padding:48px;border-radius:8px;line-height:normal;overflow:visible;animation:fadeIn .2s forwards}.pills dialog .dialog--content{display:flex;gap:2rem;box-sizing:border-box}.pills dialog .dialog--content h2{font-size:28px;line-height:125%;letter-spacing:-.64px;color:#000;padding-top:0;margin-top:0}.pills dialog .dialog--content>div{flex:1;border-radius:8px;width:100%}.pills dialog .dialog--content .dialog--first{background:#fff;padding:48px}.pills dialog .dialog--content .dialog--second{display:flex;flex-direction:column;gap:2rem}.pills dialog .dialog--content .dialog--second:first-child{flex:1;height:100%;object-fit:fill}.pills dialog .dialog--content .dialog--second img{border-radius:8px;object-fit:cover;max-width:100%}.pills dialog .dialog--content .dialog--second .button{width:100%}.pills dialog button{position:absolute;top:-1rem;right:-1rem;background:#fff;border-radius:100%;padding:1rem;border:none;rotate:45deg;cursor:pointer;line-height:0;transition:all .1s}.pills dialog button:hover{top:-1.1rem;right:-1.1rem;box-shadow:#0000001a 0 4px 12px}dialog::backdrop{background:#000;opacity:.75}@media screen and (max-width: calc(var(--page-width) + 15rem)){.pills{padding:0 1.5rem}}@media screen and (max-width:750px){.pills .pills--container{position:relative;top:0!important;left:0!important;display:flex;flex-wrap:wrap;gap:1rem}.pills .pills--container .pill{position:relative;top:0!important;left:0!important;background-color:rgba(var(--color-foreground),.1)}.pills .pills--container .pill:hover{gap:1.2rem;background-color:rgba(var(--color-foreground),.2)}.pills>div>img{height:350px}.pills dialog{width:98%;padding:1em}.pills dialog .dialog--content{flex-direction:column;gap:1rem}.pills dialog .dialog--content .dialog--first{padding:1em}}
/*# sourceMappingURL=/cdn/shop/t/37/assets/section-pills-w-image.css.map */