.eso-demo .eso-p3-diagram{grid-template-columns:minmax(0,1fr) 301px minmax(0,1fr);align-items:stretch;gap:32px;margin:56px 0 0;display:grid}.eso-demo .eso-p3-diagram>div{flex-direction:column;gap:40px;display:flex}.eso-demo .eso-p3-diagram>div:first-of-type{display:none}.eso-demo .eso-p3-diagram>div:nth-of-type(2){align-items:flex-end;padding:16px 70px 16px 0}.eso-demo .eso-p3-diagram>div:last-of-type{justify-content:space-between;gap:0;padding:16px 0 16px 70px}.eso-demo .eso-p3-diagram>div:last-of-type .eso-p3-callout:first-child{margin-top:176px}.eso-demo .eso-p3-callout{border:1px solid var(--eso-border);width:250px;max-width:100%;padding:16px;position:relative}.eso-demo .eso-p3-callout:before{content:"";background:#668e45;width:70px;height:1px;position:absolute;top:50%}.eso-demo .eso-p3-callout:after{content:"";background:#668e45;border-radius:50%;width:6px;height:6px;position:absolute;top:calc(50% - 2.5px)}.eso-demo .eso-p3-diagram>div:nth-of-type(2) .eso-p3-callout:before{left:100%}.eso-demo .eso-p3-diagram>div:nth-of-type(2) .eso-p3-callout:after{left:calc(100% + 64px)}.eso-demo .eso-p3-diagram>div:last-of-type .eso-p3-callout:before{right:100%}.eso-demo .eso-p3-diagram>div:last-of-type .eso-p3-callout:after{right:calc(100% + 64px)}.eso-demo .eso-p3-callout .demo-list{margin-top:0}.eso-demo .eso-p3-callout .demo-list li{overflow-wrap:anywhere;align-items:baseline;gap:8px;min-height:22px;margin-top:6px;font-size:14px;line-height:20px}.eso-demo .eso-p3-callout .demo-list li:first-child{margin-top:0}.eso-demo .eso-p3-bottle-frame{border-left:1px solid var(--eso-border);border-right:1px solid var(--eso-border);justify-content:center;align-items:center;padding:0 40px;display:flex}.eso-demo .eso-p3-bottle{color:var(--eso-text);border:0;width:auto;max-width:none;height:460px}@media (min-width:768px) and (max-width:1023px){.eso-demo .eso-p3-diagram>div:nth-of-type(2){padding-right:46px}.eso-demo .eso-p3-diagram>div:last-of-type{padding-left:46px}.eso-demo .eso-p3-callout:before{width:46px}.eso-demo .eso-p3-diagram>div:nth-of-type(2) .eso-p3-callout:after{left:calc(100% + 40px)}.eso-demo .eso-p3-diagram>div:last-of-type .eso-p3-callout:after{right:calc(100% + 40px)}}@media (min-width:768px) and (max-width:900px){.eso-demo .eso-p3-diagram{grid-template-columns:minmax(0,1fr) 201px minmax(0,1fr);gap:24px}.eso-demo .eso-p3-bottle-frame{padding:0}.eso-demo .eso-p3-diagram>div:nth-of-type(2){padding-right:24px}.eso-demo .eso-p3-diagram>div:last-of-type{padding-left:24px}.eso-demo .eso-p3-callout:before{width:24px}.eso-demo .eso-p3-diagram>div:nth-of-type(2) .eso-p3-callout:after{left:calc(100% + 18px)}.eso-demo .eso-p3-diagram>div:last-of-type .eso-p3-callout:after{right:calc(100% + 18px)}}@media (max-width:767px){.eso-demo .eso-p3-diagram{flex-direction:column;gap:0;display:flex}.eso-demo .eso-p3-diagram>div:first-of-type{border:1px solid var(--eso-border);align-items:center;padding:24px;display:flex}.eso-demo .eso-p3-mobile-bottle .eso-p3-bottle{height:256px;display:block}.eso-demo .eso-p3-bottle-frame{display:none!important}.eso-demo .eso-p3-diagram>div:nth-of-type(2),.eso-demo .eso-p3-diagram>div:last-of-type{align-items:stretch;gap:0;padding:0}.eso-demo .eso-p3-diagram>div:last-of-type .eso-p3-callout:first-child{margin:0}.eso-demo .eso-p3-callout{border-top:0;width:100%}.eso-demo .eso-p3-callout:before,.eso-demo .eso-p3-callout:after{display:none}}