.infobox{--body-width:18rem;display:inline-block;position:relative;z-index:2;.infobox__body{background-color:var(--c-dark);border-radius:.6rem;color:var(--c-white);font-size:1.3rem;left:63.4%;line-height:1.23;opacity:0;padding:.9rem;pointer-events:none;position:absolute;transform:translate(-50%);transition:opacity .3s;width:var(--body-width);p{color:inherit}&:before{background-color:var(--c-dark);clip-path:polygon(50% 0,0 100%,100% 100%);content:"";height:8.5px;left:50%;position:absolute;top:-7px;transform:translate(-50%);width:13px}}&.infobox--right{.infobox__body{left:calc(100% + 1.3rem);top:50%;transform:translateY(-50%);&:before{clip-path:polygon(0 50%,100% 0,100% 100%);height:13px;left:0;top:50%;transform:translate(-90%,-50%);width:8.5px}}}&.is-expanded{@media (min-width:1024px){.infobox__body{opacity:1;position:absolute}}}}