.logo-download-cols{grid-template-columns:1fr 1fr;display:grid;@media not (--screen-sm){grid-template-columns:1fr}}.logo-download-col{flex-direction:column;align-items:center;gap:1.5rem;padding:2.5rem 2rem 2rem;display:flex;& img{max-width:100%;height:auto}&.logo-download-col--light{background-color:var(--color-gray-light)}&.logo-download-col--dark{background-color:var(--color-theme)}}.logo-download-links{gap:.5rem;display:flex;& a{border-radius:.3rem;align-items:center;gap:.25rem;padding:.35rem .75rem;font-family:monospace;font-size:.85rem;font-weight:600;text-decoration:none;transition:background-color .15s;display:inline-flex;.logo-download-col--light &{color:var(--color-theme);background-color:#0000000f;&:hover{background-color:#0000001f}}.logo-download-col--dark &{color:#fffc;background-color:#ffffff1a;&:hover{background-color:#ffffff2e}}}}.logo-download-icon{font-size:.8rem;font-weight:700}.logo-download-label{text-transform:uppercase;font-size:.85rem;font-weight:600;.logo-download-col--light &{color:var(--color-muted)}.logo-download-col--dark &{color:#fff6}}.color-palette{grid-template-columns:repeat(4,1fr);gap:0;margin-bottom:1.5rem;display:grid;@media not (--screen-md){grid-template-columns:repeat(2,1fr)}@media not (--screen-sm){grid-template-columns:1fr}}.color-card-swatch{height:5rem}.color-card:first-child .color-card-swatch,.color-card:last-child .color-card-swatch{border-radius:0}.color-card-info{border:1px solid var(--color-border);border-left:none;flex-direction:column;gap:.15rem;padding:.6rem .75rem;font-size:.8rem;line-height:1.4;display:flex;& strong{font-size:.9rem}.color-card:first-child &{border-left:1px solid var(--color-border)}}.color-card-role{color:var(--color-muted);margin-bottom:.25rem;font-size:.85rem}.color-value{border:1px solid var(--color-border);background:var(--color-gray-light);text-align:left;cursor:pointer;border-radius:.25rem;width:100%;margin:0;padding:.25rem .4rem;font-family:monospace;font-size:.7rem;transition:background-color .15s,border-color .15s;display:block;&:hover{background-color:var(--color-border);border-color:var(--color-muted)}&.copied{background-color:var(--color-theme);border-color:var(--color-theme);color:#fff;font-style:italic}}.logo-examples{grid-template-columns:repeat(3,1fr);gap:.75rem;margin-bottom:1.5rem;padding:0 1rem;display:grid;@media not (--screen-md){grid-template-columns:repeat(2,1fr)}@media not (--screen-sm){grid-template-columns:1fr}}.logo-example{text-align:center;& span{margin-top:.5rem;font-size:1rem;font-weight:600;display:block}}.logo-example-preview{background-color:var(--color-gray-light);border:2px solid var(--color-border);border-radius:.4rem;justify-content:center;align-items:center;height:9rem;display:flex;overflow:hidden;& img{max-width:100%;height:auto}.logo-example--do &{background-color:#f0fdf4;border-color:#86efac}.logo-example--dont &{background-color:#fef2f2;border-color:#fca5a5}}.logo-example--do span{color:var(--color-success)}.logo-example--dont span{color:var(--color-danger)}.logo-icon-do,.logo-icon-dont{margin-right:.15rem;font-style:normal;font-weight:700}.logo-icon-do{font-size:.85rem}.logo-icon-dont{font-size:.7rem}.logo-example-preview--centered{position:relative;& .center-line{background-color:var(--color-success);opacity:.3;position:absolute}& .center-line--h{width:100%;height:1px;top:50%}& .center-line--v{width:1px;height:100%;left:50%}}.logo-example-preview--proportions{position:relative;& .proportion-line{background-color:var(--color-success);opacity:.5;position:absolute}& .proportion-line--h{width:100px;height:1px;bottom:.95rem;&:after,&:before{content:"";background-color:var(--color-success);width:1px;height:7px;position:absolute;top:-3px}&:before{left:0}&:after{right:0}}& .proportion-line--v{width:1px;height:55%;right:5.5rem;&:after,&:before{content:"";background-color:var(--color-success);width:7px;height:1px;position:absolute;left:-3px}&:before{top:0}&:after{bottom:0}}}.logo-example-preview--original{position:relative;& .original-stamp{font-family:var(--font-heading);letter-spacing:.15em;color:var(--color-success);border:1.5px solid var(--color-success);text-transform:uppercase;opacity:.7;border-radius:.15rem;padding:.1rem .4rem;font-size:.55rem;font-weight:700;position:absolute;bottom:.5rem;right:.6rem}}.logo-example-preview--busy{background-blend-mode:multiply;background:repeating-linear-gradient(35deg,#ff5a14 0,#e8b4b8 12px,#0096c8 24px,#c8e8b4 36px,#e8d4b4 48px),repeating-linear-gradient(-25deg,#b4c8e8 0,#ff5a14 16px,#c8e8b4 32px,#e8b4b8 48px)}.logo-safebox{aspect-ratio:1;background-color:#fff;border-radius:.2rem;justify-content:center;align-items:center;padding:1rem;display:flex}.logo-example-preview--crop img{clip-path:inset(38% 0 0)}.logo-example-preview--tight{flex-direction:row;gap:0;padding:.5rem;& img{margin:0}& .tight-element{font-size:2rem;line-height:1}}.logo-example-preview--clearspace{position:relative;& .clearspace-box{border:1px dashed #aaa;border-radius:.25rem;align-items:center;gap:.4rem;padding:1.2rem;display:flex}& .clearspace-label{font-size:.6rem;font-weight:700;font-family:var(--font-heading);color:var(--color-success);text-transform:uppercase;opacity:.7}}
