@@ -23,52 +23,39 @@ let { heading, subheading = undefined } = Astro.props;
2323
2424<style >
2525.container {
26- /* container-type: inline-size; */
26+ container-type: inline-size;
2727 inline-size: 100%;
2828 block-size: 100%;
2929}
3030
3131.action-card-title {
3232 font-weight: var(--font-weight-default);
33- font-size: var(--font-size-medium);
33+ font-size: var(--font-size-base);
34+ line-height: var(--line-height-base);
3435}
3536
3637.card {
3738 --card-padding-inline: 0px;
3839 --card-padding-block: 0px;
3940
40- display: grid;
41- grid-template:
42- [header-start]
43- 1fr
44- [header-end action-start]
45- auto
46- [action-end]
47- / 1fr;
4841 background: linear-gradient(
4942 45deg,
5043 color-mix(in oklch, var(--color-border-base), transparent 97%),
5144 color-mix(in oklch, var(--color-surface-base), transparent 20%)
5245 );
53- backdrop-filter: blur(var(--spacing-base) );
46+ backdrop-filter: blur(4px );
5447 box-shadow:
5548 var(--_card-shadow),
5649 inset 0px 0px var(--spacing-base) calc(var(--spacing-near) * -1)
5750 color-mix(in oklch, var(--color-border-base), transparent 20%);
5851 block-size: 100%;
59- text-decoration: none;
60- transition: border-color 300ms ease, box-shadow 300ms;
6152}
6253
6354.header {
6455 grid-area: header;
6556 padding: var(--spacing-base);
6657}
6758
68- h2 {
69- line-height: var(--line-height-base);
70- }
71-
7259.headings {
7360 & span {
7461 color: var(--color-text-muted);
8269 justify-content: end;
8370 line-height: var(--line-height-base);
8471}
72+
73+ @media (min-width: 24rem) {
74+ .action-card-title {
75+ font-size: var(--font-size-medium);
76+ }
77+ }
8578</style >
0 commit comments