@layer base,vendor,prose,components,utilities;.cattle-color-chart{overflow-wrap:anywhere;min-width:0;container-type:inline-size}.cattle-color-chart>section{margin-block-start:var(--space-8)}.cattle-color-chart :is(section,[data-cattle-chart-faq]){scroll-margin-block-start:calc(var(--header-height) + var(--space-4))}.cattle-color-chart__links{gap:var(--space-2) var(--space-4);margin-block:var(--space-4);flex-wrap:wrap;display:flex}.cattle-color-chart__links>a{color:var(--text-link);text-decoration:underline}.cattle-color-chart__grid{gap:var(--space-4);grid-template-columns:minmax(0,1fr);display:grid}.cattle-color-chart :is(.cattle-color-chart__look,.cattle-color-chart__save){min-width:0;padding:var(--space-4);border-radius:var(--radius-lg)}.cattle-color-chart :is(.cattle-color-chart__look,.cattle-color-chart__save)>:first-child{margin-block-start:0}.cattle-color-chart figure{margin:0}.cattle-color-chart figure img{border-radius:var(--radius-md);width:100%;height:auto;display:block}.cattle-color-chart figcaption{color:var(--text-secondary);font-size:var(--fs-14);margin-block-start:var(--space-1)}.cattle-color-chart__details{margin-block-start:var(--space-6)}.cattle-color-chart__details figure{max-width:100%;margin-block-end:var(--space-4)}@container (width>=540px){.cattle-color-chart__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}