.before-after{container-type:inline-size;background:rgb(var(--color-background));background:var(--gradient-background, rgb(var(--color-background)));color:rgb(var(--color-foreground));border-radius:1.5rem;padding:2rem 1.5rem 4rem;margin:0 0 2rem}.before-after__heading{margin:0 0 2rem;text-align:center;font-size:2.8rem;line-height:1.1;font-weight:500}@media screen and (min-width:1025px){.before-after__heading{font-size:3.2rem}}.before-after__heading em{font-style:italic}.before-after__tabs{display:flex;gap:2.4rem;overflow-x:auto;padding-bottom:0;margin-bottom:1.5rem;scrollbar-width:none;cursor:grab;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}.before-after__tabs.is-dragging{cursor:grabbing;scroll-behavior:auto;-webkit-user-select:none;user-select:none}.before-after__tabs::-webkit-scrollbar{display:none}.before-after__tab{-webkit-appearance:none;appearance:none;background:none;border:0;padding:.7rem 0 .5rem;cursor:pointer;white-space:nowrap;font-family:inherit;font-size:1.5rem;letter-spacing:inherit;line-height:2.1rem;font-weight:700;color:rgb(var(--color-foreground));border-bottom:.2rem solid transparent}.before-after__tab.is-active{color:rgb(var(--color-button));border-bottom-color:rgb(var(--color-button))}.before-after__panel{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem;align-items:center}@container (min-width: 440px){.before-after__panel{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}.before-after__panel:not(.is-active){display:none}.before-after__media{line-height:0}.before-after__image{display:block;width:100%;height:auto;border-radius:.6rem}.before-after__stars{display:block;width:7.5rem;height:auto;margin:0 0 .7rem}.before-after__title{margin:0;font-size:1.5rem;font-weight:700;line-height:1.2;color:rgb(var(--color-button))}.before-after__text{margin-top:.5rem;font-size:1.2rem;line-height:1.4;text-align:justify}@container (min-width: 440px){.before-after__title{font-size:1.6rem}.before-after__text{font-size:1.4rem;text-align:left}}.before-after__text p{margin:0;font-style:italic}@container (max-width: 439px){.before-after__panels{width:90%}.before-after__content{text-align:center}.before-after__text{text-align:left}.before-after__stars{margin-left:auto;margin-right:auto}}
/*# sourceMappingURL=/cdn/shop/t/2/assets/component-before-after.css.map */