@amsterdam/design-system-css/dist/breakout/breakout.css

Stylesheets for all components from the Amsterdam Design System and some general utilities. Use it to apply the visual design of the City of Amsterdam to your HTML elements or non-React components.

.ams-grid{column-gap:var(--ams-grid-column-gap);display:grid;grid-template-columns:repeat(var(--ams-grid-column-count), 1fr);padding-inline:var(--ams-grid-padding-inline);row-gap:var(--ams-grid-row-gap-m)}@media screen and (min-width: 36rem){.ams-grid{grid-template-columns:repeat(var(--ams-grid-medium-column-count), 1fr);padding-inline:var(--ams-grid-medium-padding-inline)}}@media screen and (min-width: 68rem){.ams-grid{grid-template-columns:repeat(var(--ams-grid-wide-column-count), 1fr);padding-inline:var(--ams-grid-wide-padding-inline)}}.ams-grid--gap-vertical--none{row-gap:initial}.ams-grid--gap-vertical--small{row-gap:var(--ams-grid-row-gap-s)}.ams-grid--gap-vertical--large{row-gap:var(--ams-grid-row-gap-l)}.ams-grid--padding-bottom--small{padding-block-end:var(--ams-grid-padding-block-s)}.ams-grid--padding-bottom--medium{padding-block-end:var(--ams-grid-padding-block-m)}.ams-grid--padding-bottom--large{padding-block-end:var(--ams-grid-padding-block-l)}.ams-grid--padding-top--small{padding-block-start:var(--ams-grid-padding-block-s)}.ams-grid--padding-top--medium{padding-block-start:var(--ams-grid-padding-block-m)}.ams-grid--padding-top--large{padding-block-start:var(--ams-grid-padding-block-l)}.ams-grid--padding-vertical--small{padding-block:var(--ams-grid-padding-block-s)}.ams-grid--padding-vertical--medium{padding-block:var(--ams-grid-padding-block-m)}.ams-grid--padding-vertical--large{padding-block:var(--ams-grid-padding-block-l)}.ams-grid__cell--span-all{grid-column:1/-1}.ams-grid__cell--span-1{grid-column-end:span 1}.ams-grid__cell--start-1{grid-column-start:1}.ams-grid__cell--span-2{grid-column-end:span 2}.ams-grid__cell--start-2{grid-column-start:2}.ams-grid__cell--span-3{grid-column-end:span 3}.ams-grid__cell--start-3{grid-column-start:3}.ams-grid__cell--span-4{grid-column-end:span 4}.ams-grid__cell--start-4{grid-column-start:4}.ams-grid__cell--span-5{grid-column-end:span 5}.ams-grid__cell--start-5{grid-column-start:5}.ams-grid__cell--span-6{grid-column-end:span 6}.ams-grid__cell--start-6{grid-column-start:6}.ams-grid__cell--span-7{grid-column-end:span 7}.ams-grid__cell--start-7{grid-column-start:7}.ams-grid__cell--span-8{grid-column-end:span 8}.ams-grid__cell--start-8{grid-column-start:8}.ams-grid__cell--span-9{grid-column-end:span 9}.ams-grid__cell--start-9{grid-column-start:9}.ams-grid__cell--span-10{grid-column-end:span 10}.ams-grid__cell--start-10{grid-column-start:10}.ams-grid__cell--span-11{grid-column-end:span 11}.ams-grid__cell--start-11{grid-column-start:11}.ams-grid__cell--span-12{grid-column-end:span 12}.ams-grid__cell--start-12{grid-column-start:12}@media screen and (min-width: 36rem)and (min-width: 36rem){.ams-grid__cell--span-1-medium{grid-column-end:span 1}}@media screen and (min-width: 36rem)and (min-width: 36rem){.ams-grid__cell--start-1-medium{grid-column-start:1}}@media screen and (min-width: 36rem)and (min-width: 36rem){.ams-grid__cell--span-2-medium{grid-column-end:span 2}}@media screen and (min-width: 36rem)and (min-width: 36rem){.ams-grid__cell--start-2-medium{grid-column-start:2}}@media screen and (min-width: 36rem)and (min-width: 36rem){.ams-grid__cell--span-3-medium{grid-column-end:span 3}}@media screen and (min-width: 36rem)and (min-width: 36rem){.ams-grid__cell--start-3-medium{grid-column-start:3}}@media screen and (min-width: 36rem)and (min-width: 36rem){.ams-grid__cell--span-4-medium{grid-column-end:span 4}}@media screen and (min-width: 36rem)and (min-width: 36rem){.ams-grid__cell--start-4-medium{grid-column-start:4}}@media screen and (min-width: 36rem)and (min-width: 36rem){.ams-grid__cell--span-5-medium{grid-column-end:span 5}}@media screen and (min-width: 36rem)and (min-width: 36rem){.ams-grid__cell--start-5-medium{grid-column-start:5}}@media screen and (min-width: 36rem)and (min-width: 36rem){.ams-grid__cell--span-6-medium{grid-column-end:span 6}}@media screen and (min-width: 36rem)and (min-width: 36rem){.ams-grid__cell--start-6-medium{grid-column-start:6}}@media screen and (min-width: 36rem)and (min-width: 36rem){.ams-grid__cell--span-7-medium{grid-column-end:span 7}}@media screen and (min-width: 36rem)and (min-width: 36rem){.ams-grid__cell--start-7-medium{grid-column-start:7}}@media screen and (min-width: 36rem)and (min-width: 36rem){.ams-grid__cell--span-8-medium{grid-column-end:span 8}}@media screen and (min-width: 36rem)and (min-width: 36rem){.ams-grid__cell--start-8-medium{grid-column-start:8}}@media screen and (min-width: 36rem)and (min-width: 36rem){.ams-grid__cell--span-9-medium{grid-column-end:span 9}}@media screen and (min-width: 36rem)and (min-width: 36rem){.ams-grid__cell--start-9-medium{grid-column-start:9}}@media screen and (min-width: 36rem)and (min-width: 36rem){.ams-grid__cell--span-10-medium{grid-column-end:span 10}}@media screen and (min-width: 36rem)and (min-width: 36rem){.ams-grid__cell--start-10-medium{grid-column-start:10}}@media screen and (min-width: 36rem)and (min-width: 36rem){.ams-grid__cell--span-11-medium{grid-column-end:span 11}}@media screen and (min-width: 36rem)and (min-width: 36rem){.ams-grid__cell--start-11-medium{grid-column-start:11}}@media screen and (min-width: 36rem)and (min-width: 36rem){.ams-grid__cell--span-12-medium{grid-column-end:span 12}}@media screen and (min-width: 36rem)and (min-width: 36rem){.ams-grid__cell--start-12-medium{grid-column-start:12}}@media screen and (min-width: 68rem)and (min-width: 68rem){.ams-grid__cell--span-1-wide{grid-column-end:span 1}}@media screen and (min-width: 68rem)and (min-width: 68rem){.ams-grid__cell--start-1-wide{grid-column-start:1}}@media screen and (min-width: 68rem)and (min-width: 68rem){.ams-grid__cell--span-2-wide{grid-column-end:span 2}}@media screen and (min-width: 68rem)and (min-width: 68rem){.ams-grid__cell--start-2-wide{grid-column-start:2}}@media screen and (min-width: 68rem)and (min-width: 68rem){.ams-grid__cell--span-3-wide{grid-column-end:span 3}}@media screen and (min-width: 68rem)and (min-width: 68rem){.ams-grid__cell--start-3-wide{grid-column-start:3}}@media screen and (min-width: 68rem)and (min-width: 68rem){.ams-grid__cell--span-4-wide{grid-column-end:span 4}}@media screen and (min-width: 68rem)and (min-width: 68rem){.ams-grid__cell--start-4-wide{grid-column-start:4}}@media screen and (min-width: 68rem)and (min-width: 68rem){.ams-grid__cell--span-5-wide{grid-column-end:span 5}}@media screen and (min-width: 68rem)and (min-width: 68rem){.ams-grid__cell--start-5-wide{grid-column-start:5}}@media screen and (min-width: 68rem)and (min-width: 68rem){.ams-grid__cell--span-6-wide{grid-column-end:span 6}}@media screen and (min-width: 68rem)and (min-width: 68rem){.ams-grid__cell--start-6-wide{grid-column-start:6}}@media screen and (min-width: 68rem)and (min-width: 68rem){.ams-grid__cell--span-7-wide{grid-column-end:span 7}}@media screen and (min-width: 68rem)and (min-width: 68rem){.ams-grid__cell--start-7-wide{grid-column-start:7}}@media screen and (min-width: 68rem)and (min-width: 68rem){.ams-grid__cell--span-8-wide{grid-column-end:span 8}}@media screen and (min-width: 68rem)and (min-width: 68rem){.ams-grid__cell--start-8-wide{grid-column-start:8}}@media screen and (min-width: 68rem)and (min-width: 68rem){.ams-grid__cell--span-9-wide{grid-column-end:span 9}}@media screen and (min-width: 68rem)and (min-width: 68rem){.ams-grid__cell--start-9-wide{grid-column-start:9}}@media screen and (min-width: 68rem)and (min-width: 68rem){.ams-grid__cell--span-10-wide{grid-column-end:span 10}}@media screen and (min-width: 68rem)and (min-width: 68rem){.ams-grid__cell--start-10-wide{grid-column-start:10}}@media screen and (min-width: 68rem)and (min-width: 68rem){.ams-grid__cell--span-11-wide{grid-column-end:span 11}}@media screen and (min-width: 68rem)and (min-width: 68rem){.ams-grid__cell--start-11-wide{grid-column-start:11}}@media screen and (min-width: 68rem)and (min-width: 68rem){.ams-grid__cell--span-12-wide{grid-column-end:span 12}}@media screen and (min-width: 68rem)and (min-width: 68rem){.ams-grid__cell--start-12-wide{grid-column-start:12}}.ams-breakout{column-gap:var(--ams-grid-column-gap);display:grid;grid-template-columns:repeat(var(--ams-grid-column-count), 1fr);padding-inline:var(--ams-grid-padding-inline);row-gap:var(--ams-grid-row-gap-m)}@media screen and (min-width: 36rem){.ams-breakout{grid-template-columns:repeat(var(--ams-grid-medium-column-count), 1fr);padding-inline:var(--ams-grid-medium-padding-inline)}}@media screen and (min-width: 68rem){.ams-breakout{grid-template-columns:repeat(var(--ams-grid-wide-column-count), 1fr);padding-inline:var(--ams-grid-wide-padding-inline)}}.ams-breakout--gap-vertical--none{row-gap:initial}.ams-breakout--gap-vertical--small{row-gap:var(--ams-grid-row-gap-s)}.ams-breakout--gap-vertical--large{row-gap:var(--ams-grid-row-gap-l)}.ams-breakout--padding-bottom--small{padding-block-end:var(--ams-grid-padding-block-s)}.ams-breakout--padding-bottom--medium{padding-block-end:var(--ams-grid-padding-block-m)}.ams-breakout--padding-bottom--large{padding-block-end:var(--ams-grid-padding-block-l)}.ams-breakout--padding-top--small{padding-block-start:var(--ams-grid-padding-block-s)}.ams-breakout--padding-top--medium{padding-block-start:var(--ams-grid-padding-block-m)}.ams-breakout--padding-top--large{padding-block-start:var(--ams-grid-padding-block-l)}.ams-breakout--padding-vertical--small{padding-block:var(--ams-grid-padding-block-s)}.ams-breakout--padding-vertical--medium{padding-block:var(--ams-grid-padding-block-m)}.ams-breakout--padding-vertical--large{padding-block:var(--ams-grid-padding-block-l)}.ams-breakout__cell--col-span-all{grid-column:1/-1}.ams-breakout__cell--col-span-1{grid-column-end:span 1}.ams-breakout__cell--col-start-1{grid-column-start:1}.ams-breakout__cell--col-span-2{grid-column-end:span 2}.ams-breakout__cell--col-start-2{grid-column-start:2}.ams-breakout__cell--col-span-3{grid-column-end:span 3}.ams-breakout__cell--col-start-3{grid-column-start:3}.ams-breakout__cell--col-span-4{grid-column-end:span 4}.ams-breakout__cell--col-start-4{grid-column-start:4}.ams-breakout__cell--col-span-5{grid-column-end:span 5}.ams-breakout__cell--col-start-5{grid-column-start:5}.ams-breakout__cell--col-span-6{grid-column-end:span 6}.ams-breakout__cell--col-start-6{grid-column-start:6}.ams-breakout__cell--col-span-7{grid-column-end:span 7}.ams-breakout__cell--col-start-7{grid-column-start:7}.ams-breakout__cell--col-span-8{grid-column-end:span 8}.ams-breakout__cell--col-start-8{grid-column-start:8}.ams-breakout__cell--col-span-9{grid-column-end:span 9}.ams-breakout__cell--col-start-9{grid-column-start:9}.ams-breakout__cell--col-span-10{grid-column-end:span 10}.ams-breakout__cell--col-start-10{grid-column-start:10}.ams-breakout__cell--col-span-11{grid-column-end:span 11}.ams-breakout__cell--col-start-11{grid-column-start:11}.ams-breakout__cell--col-span-12{grid-column-end:span 12}.ams-breakout__cell--col-start-12{grid-column-start:12}@media screen and (min-width: 36rem)and (min-width: 36rem){.ams-breakout__cell--col-span-1-medium{grid-column-end:span 1}}@media screen and (min-width: 36rem)and (min-width: 36rem){.ams-breakout__cell--col-start-1-medium{grid-column-start:1}}@media screen and (min-width: 36rem)and (min-width: 36rem){.ams-breakout__cell--col-span-2-medium{grid-column-end:span 2}}@media screen and (min-width: 36rem)and (min-width: 36rem){.ams-breakout__cell--col-start-2-medium{grid-column-start:2}}@media screen and (min-width: 36rem)and (min-width: 36rem){.ams-breakout__cell--col-span-3-medium{grid-column-end:span 3}}@media screen and (min-width: 36rem)and (min-width: 36rem){.ams-breakout__cell--col-start-3-medium{grid-column-start:3}}@media screen and (min-width: 36rem)and (min-width: 36rem){.ams-breakout__cell--col-span-4-medium{grid-column-end:span 4}}@media screen and (min-width: 36rem)and (min-width: 36rem){.ams-breakout__cell--col-start-4-medium{grid-column-start:4}}@media screen and (min-width: 36rem)and (min-width: 36rem){.ams-breakout__cell--col-span-5-medium{grid-column-end:span 5}}@media screen and (min-width: 36rem)and (min-width: 36rem){.ams-breakout__cell--col-start-5-medium{grid-column-start:5}}@media screen and (min-width: 36rem)and (min-width: 36rem){.ams-breakout__cell--col-span-6-medium{grid-column-end:span 6}}@media screen and (min-width: 36rem)and (min-width: 36rem){.ams-breakout__cell--col-start-6-medium{grid-column-start:6}}@media screen and (min-width: 36rem)and (min-width: 36rem){.ams-breakout__cell--col-span-7-medium{grid-column-end:span 7}}@media screen and (min-width: 36rem)and (min-width: 36rem){.ams-breakout__cell--col-start-7-medium{grid-column-start:7}}@media screen and (min-width: 36rem)and (min-width: 36rem){.ams-breakout__cell--col-span-8-medium{grid-column-end:span 8}}@media screen and (min-width: 36rem)and (min-width: 36rem){.ams-breakout__cell--col-start-8-medium{grid-column-start:8}}@media screen and (min-width: 36rem)and (min-width: 36rem){.ams-breakout__cell--col-span-9-medium{grid-column-end:span 9}}@media screen and (min-width: 36rem)and (min-width: 36rem){.ams-breakout__cell--col-start-9-medium{grid-column-start:9}}@media screen and (min-width: 36rem)and (min-width: 36rem){.ams-breakout__cell--col-span-10-medium{grid-column-end:span 10}}@media screen and (min-width: 36rem)and (min-width: 36rem){.ams-breakout__cell--col-start-10-medium{grid-column-start:10}}@media screen and (min-width: 36rem)and (min-width: 36rem){.ams-breakout__cell--col-span-11-medium{grid-column-end:span 11}}@media screen and (min-width: 36rem)and (min-width: 36rem){.ams-breakout__cell--col-start-11-medium{grid-column-start:11}}@media screen and (min-width: 36rem)and (min-width: 36rem){.ams-breakout__cell--col-span-12-medium{grid-column-end:span 12}}@media screen and (min-width: 36rem)and (min-width: 36rem){.ams-breakout__cell--col-start-12-medium{grid-column-start:12}}@media screen and (min-width: 68rem)and (min-width: 68rem){.ams-breakout__cell--col-span-1-wide{grid-column-end:span 1}}@media screen and (min-width: 68rem)and (min-width: 68rem){.ams-breakout__cell--col-start-1-wide{grid-column-start:1}}@media screen and (min-width: 68rem)and (min-width: 68rem){.ams-breakout__cell--col-span-2-wide{grid-column-end:span 2}}@media screen and (min-width: 68rem)and (min-width: 68rem){.ams-breakout__cell--col-start-2-wide{grid-column-start:2}}@media screen and (min-width: 68rem)and (min-width: 68rem){.ams-breakout__cell--col-span-3-wide{grid-column-end:span 3}}@media screen and (min-width: 68rem)and (min-width: 68rem){.ams-breakout__cell--col-start-3-wide{grid-column-start:3}}@media screen and (min-width: 68rem)and (min-width: 68rem){.ams-breakout__cell--col-span-4-wide{grid-column-end:span 4}}@media screen and (min-width: 68rem)and (min-width: 68rem){.ams-breakout__cell--col-start-4-wide{grid-column-start:4}}@media screen and (min-width: 68rem)and (min-width: 68rem){.ams-breakout__cell--col-span-5-wide{grid-column-end:span 5}}@media screen and (min-width: 68rem)and (min-width: 68rem){.ams-breakout__cell--col-start-5-wide{grid-column-start:5}}@media screen and (min-width: 68rem)and (min-width: 68rem){.ams-breakout__cell--col-span-6-wide{grid-column-end:span 6}}@media screen and (min-width: 68rem)and (min-width: 68rem){.ams-breakout__cell--col-start-6-wide{grid-column-start:6}}@media screen and (min-width: 68rem)and (min-width: 68rem){.ams-breakout__cell--col-span-7-wide{grid-column-end:span 7}}@media screen and (min-width: 68rem)and (min-width: 68rem){.ams-breakout__cell--col-start-7-wide{grid-column-start:7}}@media screen and (min-width: 68rem)and (min-width: 68rem){.ams-breakout__cell--col-span-8-wide{grid-column-end:span 8}}@media screen and (min-width: 68rem)and (min-width: 68rem){.ams-breakout__cell--col-start-8-wide{grid-column-start:8}}@media screen and (min-width: 68rem)and (min-width: 68rem){.ams-breakout__cell--col-span-9-wide{grid-column-end:span 9}}@media screen and (min-width: 68rem)and (min-width: 68rem){.ams-breakout__cell--col-start-9-wide{grid-column-start:9}}@media screen and (min-width: 68rem)and (min-width: 68rem){.ams-breakout__cell--col-span-10-wide{grid-column-end:span 10}}@media screen and (min-width: 68rem)and (min-width: 68rem){.ams-breakout__cell--col-start-10-wide{grid-column-start:10}}@media screen and (min-width: 68rem)and (min-width: 68rem){.ams-breakout__cell--col-span-11-wide{grid-column-end:span 11}}@media screen and (min-width: 68rem)and (min-width: 68rem){.ams-breakout__cell--col-start-11-wide{grid-column-start:11}}@media screen and (min-width: 68rem)and (min-width: 68rem){.ams-breakout__cell--col-span-12-wide{grid-column-end:span 12}}@media screen and (min-width: 68rem)and (min-width: 68rem){.ams-breakout__cell--col-start-12-wide{grid-column-start:12}}.ams-breakout__cell--has-figure{align-self:end}.ams-breakout__cell--has-spotlight{display:grid;margin-block:calc(var(--ams-space-xl)*-1);margin-inline:calc(var(--ams-space-2xl)*-1)}.ams-breakout--gap-vertical--small>.ams-breakout__cell--has-spotlight{margin-block:calc(var(--ams-space-l)*-1)}.ams-breakout--gap-vertical--large>.ams-breakout__cell--has-spotlight{margin-block:calc(var(--ams-space-2xl)*-1)}.ams-breakout__cell--row-span-1{grid-row-end:span 1}.ams-breakout__cell--row-start-1{grid-row-start:1}.ams-breakout__cell--row-span-2{grid-row-end:span 2}.ams-breakout__cell--row-start-2{grid-row-start:2}.ams-breakout__cell--row-span-3{grid-row-end:span 3}.ams-breakout__cell--row-start-3{grid-row-start:3}.ams-breakout__cell--row-span-4{grid-row-end:span 4}.ams-breakout__cell--row-start-4{grid-row-start:4}@media screen and (min-width: 36rem){.ams-breakout__cell--row-span-1-medium{grid-row-end:span 1}.ams-breakout__cell--row-start-1-medium{grid-row-start:1}.ams-breakout__cell--row-span-2-medium{grid-row-end:span 2}.ams-breakout__cell--row-start-2-medium{grid-row-start:2}.ams-breakout__cell--row-span-3-medium{grid-row-end:span 3}.ams-breakout__cell--row-start-3-medium{grid-row-start:3}.ams-breakout__cell--row-span-4-medium{grid-row-end:span 4}.ams-breakout__cell--row-start-4-medium{grid-row-start:4}}@media screen and (min-width: 68rem){.ams-breakout__cell--row-span-1-wide{grid-row-end:span 1}.ams-breakout__cell--row-start-1-wide{grid-row-start:1}.ams-breakout__cell--row-span-2-wide{grid-row-end:span 2}.ams-breakout__cell--row-start-2-wide{grid-row-start:2}.ams-breakout__cell--row-span-3-wide{grid-row-end:span 3}.ams-breakout__cell--row-start-3-wide{grid-row-start:3}.ams-breakout__cell--row-span-4-wide{grid-row-end:span 4}.ams-breakout__cell--row-start-4-wide{grid-row-start:4}}/*# sourceMappingURL=breakout.css.map */