.frame-container{--bg-color:#fff7e1;--border-color:#000}.frame-container .frame{border:1px solid #000;width:100%;height:100%;position:relative}.frame-container .frame .corner{z-index:1;display:block;position:absolute}.frame-container .frame .corner.top-left{top:0;left:0}.frame-container .frame .corner.top-right{top:0;right:0}.frame-container .frame .corner.bottom-left{bottom:0;left:0}.frame-container .frame .corner.bottom-right{bottom:0;right:0}.frame-container.variant-none .frame{border:0 #0000}.frame-container.variant-none .corner{display:none}.frame-container.variant-standard .frame{border:0 #0000}.frame-container.variant-standard .corner{display:none}.frame-container.variant-standard .frame:before{border:2px solid var(--border-color);content:"";z-index:0;width:calc(100% + 12px);height:calc(100% + 12px);position:absolute;top:-6px;left:-6px}.frame-container.variant-rounded .corner{display:none}.frame-container.variant-rounded .frame{border-radius:15px;overflow:hidden}.frame-container.variant-diamond .frame{border:0 #0000}.frame-container.variant-diamond .corner{background-color:var(--border-color);outline:4px solid var(--bg-color);width:5.662px;height:5.662px;transform:rotate(45deg)}.frame-container.variant-diamond .corner.top-left{top:-4px;left:-4px}.frame-container.variant-diamond .corner.top-right{top:-4px;right:-4px}.frame-container.variant-diamond .corner.bottom-right{bottom:-4px;right:-4px}.frame-container.variant-diamond .corner.bottom-left{bottom:-4px;left:-4px}.frame-container.variant-diamond .frame:before{border:1px solid var(--border-color);content:"";z-index:0;width:100%;height:100%;position:absolute;top:0;left:0}.frame-container.variant-diamond-bottom-only .frame{border:0 #0000}.frame-container.variant-diamond-bottom-only .corner{background-color:var(--border-color);outline:4px solid var(--bg-color);width:5.662px;height:5.662px;transform:rotate(45deg)}.frame-container.variant-diamond-bottom-only .corner.top-left{top:-4px;left:-4px}.frame-container.variant-diamond-bottom-only .corner.top-right{top:-4px;right:-4px}.frame-container.variant-diamond-bottom-only .corner.bottom-right{bottom:-4px;right:1px}@media only screen and (min-width:768px){.frame-container.variant-diamond-bottom-only .corner.bottom-right{right:-4px}}.frame-container.variant-diamond-bottom-only .corner.bottom-left{bottom:-4px;left:1px}@media only screen and (min-width:768px){.frame-container.variant-diamond-bottom-only .corner.bottom-left{left:-4px}}.frame-container.variant-diamond-bottom-only .frame:before{border-bottom:1px solid var(--border-color);content:"";z-index:0;width:100%;height:100%;position:absolute;top:0;left:0}.frame-container.variant-bevel .corner{background:var(--bg-color);width:20px;height:26px}.frame-container.variant-bevel .corner.top-left{border-right:1px solid #000;top:-11px;left:-8px;transform:rotate(45deg)}.frame-container.variant-bevel .corner.top-right{border-right:1px solid #000;top:-11px;right:-8px;transform:rotate(135deg)}.frame-container.variant-bevel .corner.bottom-right{border-right:1px solid #000;bottom:-11px;right:-8px;transform:rotate(225deg)}.frame-container.variant-bevel .corner.bottom-left{border-right:1px solid #000;bottom:-11px;left:-8px;transform:rotate(315deg)}.frame-container.variant-square .corner{background-color:var(--bg-color);width:12px;height:12px}.frame-container.variant-square .corner.top-left{border-bottom:1px solid #000;border-right:1px solid #000;transform:translate(-1px,-1px)}.frame-container.variant-square .corner.top-right{border-bottom:1px solid #000;border-left:1px solid #000;transform:translate(1px,-1px)}.frame-container.variant-square .corner.bottom-left{border-top:1px solid #000;border-right:1px solid #000;transform:translate(-1px,1px)}.frame-container.variant-square .corner.bottom-right{border-top:1px solid #000;border-left:1px solid #000;transform:translate(1px,1px)}
