@layer post{.post-container{--post-width: clamp(10rem, 30vw, 15rem);--post-height: clamp(8.5rem, 25vw, 13rem);position:relative;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:var(--space-sm);text-decoration:none;color:inherit;width:var(--post-width);height:var(--post-height);background:var(--color-background-main);border-radius:var(--border-radius-md);padding:var(--space-sm);border:3px solid var(--color-border-subtle);transition:filter var(--transition-fast)}@media(min-width:768px){.post-container{gap:var(--space-md);padding:var(--space-md);border-width:4px}}.post-container:hover{filter:brightness(.9)}.post-container__social-stats{grid-column:1;grid-row:1}.post-container__info-stats{grid-column:2;grid-row:1;display:flex;justify-content:flex-end}.post-container__footer{grid-column:1 / 3;grid-row:2;display:flex;flex-direction:column;gap:var(--space-xs);justify-content:flex-end;overflow:hidden}.add-post-button{--post-width: clamp(10rem, 30vw, 15rem);--post-height: clamp(8.5rem, 25vw, 13rem);display:flex;align-items:center;justify-content:center;text-decoration:none;color:inherit;width:var(--post-width);height:var(--post-height);background:var(--color-surface-main);border-radius:var(--border-radius-md);border:3px solid var(--color-border-subtle);transition:filter var(--transition-fast)}@media(min-width:768px){.add-post-button{border-width:4px}}.add-post-button:hover{filter:brightness(.9)}}@layer surface{.surface{display:block}.surface--default{background:var(--color-surface-main);border:1px solid var(--color-border);border-radius:var(--border-radius-md);padding:var(--space-lg) var(--space-xl);color:var(--color-main-text);display:flex;flex-direction:column;gap:var(--space-lg)}@media(min-width:768px){.surface--default{padding:var(--space-xl) var(--space-2xl);gap:var(--space-xl)}}.surface--elevated{background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--border-radius-md);box-shadow:var(--shadow-lg)}.surface--outlined{background:transparent;border:2px solid var(--color-border);border-radius:var(--border-radius-md)}.surface--collection{background:var(--color-surface-main);border-radius:var(--border-radius-lg);padding:var(--space-lg)}@media(min-width:768px){.surface--collection{border-radius:var(--border-radius-4xl);padding:var(--space-xl) var(--space-2xl)}}.surface--auth{background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--border-radius-md);padding:min(3vh,1.8rem) min(5vw,3rem);width:clamp(20rem,50vw,30rem)}}