:root{--padding-inline:1rem;--content-max-width:900px;--breakout-size:calc((1300px - var(--content-max-width)) / 2)}.wrapper{display:grid;grid-template-columns:[full-width-start] minmax(var(--padding-inline),1fr) [breakout-start] minmax(calc(var(--padding-inline) / 2),var(--breakout-size)) [content-start] min(100% - var(--padding-inline)*4,var(--content-max-width)) [content-end] minmax(calc(var(--padding-inline) / 2),var(--breakout-size)) [breakout-end] minmax(var(--padding-inline),1fr) [full-width-end]}.full-width>:not(.breakout,.full-width,.content-end),.wrapper>:not(.breakout,.full-width,.content-end){grid-column:content}.breakout{grid-column:breakout}.content-end{grid-column:content-end}.full-width{grid-column:full-width;display:grid;grid-template-columns:inherit}.no-expand{grid-template-rows:max-content}.notification-wrapper{position:fixed;bottom:1em;right:1em;z-index:1000;gap:.5em;display:flex;flex-direction:column;place-content:flex-end flex-end}.notification{--notification-bg: ;--notification-txt: ;position:relative;padding:.5em;border-radius:5em;width:fit-content;align-self:flex-end;display:flex;flex-direction:row;justify-content:space-between;align-items:center;color:var(--notification-txt);background-color:var(--notification-bg);border:2px solid var(--notification-txt);gap:1em}.notification[data-type=error]{--notification-txt:var(--clr-danger-txt);--notification-bg:var(--clr-danger-bg)}.notification[data-type=success]{--notification-txt:var(--clr-success-txt);--notification-bg:var(--clr-success-bg)}.notification[data-type=info]{--notification-txt:var(--clr-info-txt);--notification-bg:var(--clr-info-bg)}.notification[data-type=warning]{--notification-txt:var(--clr-warning-txt);--notification-bg:var(--clr-warning-bg)}.notification-content{color:var(--notification-txt);display:flex;justify-content:center;align-items:center;justify-self:flex-start;height:100%;width:100%;padding:0}.notification-content-title{font-size:1.4em;font-weight:600}.notification-content-message{font-weight:400;font-size:1.1em}.notification-close{aspect-ratio:1/1;margin:0;border-radius:50%;border:2px solid var(--notification-txt);cursor:pointer}.notification-close svg{scale:50%;stroke-width:4px;stroke-linecap:round;stroke:var(--notification-txt)}.notification-close:hover{background-color:var(--notification-txt)}.notification-close:hover svg{stroke:var(--notification-bg)}.notification-close:active{border:2px solid #fff;background-color:var(--notification-txt)}.notification-close:active svg{stroke:#fff}.slide-in{animation:slide-in .5s ease-in-out forwards}.slide-out{animation:slide-out .5s ease-in-out forwards}@keyframes slide-in{0%{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes slide-out{0%{transform:translateX(0);opacity:1}to{transform:translateX(100%);opacity:0}}