1

Introduction du nouveau thème

This commit is contained in:
2025-10-11 00:36:18 +02:00
parent fa5ba208ed
commit 2653b0fa01
112 changed files with 1590 additions and 2766 deletions

View File

@@ -0,0 +1,15 @@
.external {
color: var(--color-link-external);
&:hover {
color: var(--color-link-external-hover);
}
}
.affiliated {
color: var(--color-link-affiliated);
&:hover {
color: var(--color-link-affiliated-hover);
}
}

View File

@@ -0,0 +1,159 @@
article.article-body {
display: flex;
flex-direction: column;
gap: var(--gap);
padding: var(--padding) 0;
font-size: 1.5rem;
.stat {
max-width: var(--width-content-max);
margin: var(--margin) auto;
width: 100%;
}
h2,
h3,
h4,
h5,
h6,
>p,
>details,
>ul,
>ol,
>blockquote,
.footnotes ol {
min-width: var(--width-content-min);
max-width: var(--width-content-max);
width: 100%;
}
h2,
h3,
h4,
h5,
h6 {
margin: auto;
color: var(--color-site-title);
font-variant: small-caps;
text-shadow: var(--shadow-text);
text-wrap: balance;
}
>p,
>details p {
margin: auto;
line-height: 150%;
text-align: justify;
}
>details {
margin: auto;
background: var(--background-spoiler);
padding: var(--padding);
border-radius: var(--radius-base);
summary {
font-variant: small-caps;
color: var(--color-site-title);
text-shadow: var(--shadow-text);
display: block;
cursor: help;
}
summary~* {
padding-top: var(--padding);
}
p {
width: 100%;
}
}
>ul,
>ol,
>details ul,
>details ol {
margin: 0 auto;
padding-left: var(--list-padding);
line-height: 150%;
display: flex;
flex-direction: column;
gap: var(--gap-list);
}
strong {
color: var(--color-site-title);
}
blockquote {
color: var(--color-text-light);
font-style: italic;
text-align: justify;
margin: auto;
cite {
display: block;
font-style: normal;
text-align: right;
}
}
>blockquote {
padding: var(--padding);
border: var(--border-panel-outer);
border-top: var(--border-panel-top);
background: var(--background-chat-other);
border-radius: var(--radius-base);
box-shadow: var(--shadow-base);
color: var(--color-text-muted);
}
pre,
code {
border-radius: var(--radius-base);
}
pre {
padding: var(--padding);
overflow: scroll;
max-height: 50vh;
max-width: 80vw;
width: 100%;
margin: var(--margin) auto;
border: var(--border-panel-outer);
border-top: var(--border-panel-top);
box-shadow: var(--shadow-base);
}
.footnotes {
ol {
margin: var(--margin) auto;
font-size: 1rem;
list-style-type: decimal;
display: flex;
flex-direction: column;
gap: var(--gap-half);
p {
width: auto;
line-height: 130%;
}
}
}
sub,
sup {
font-size: 0.75em;
line-height: 1;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.4em;
}
sub {
bottom: -0.2em;
}
}

View File

@@ -0,0 +1,6 @@
nav.articles-list {
display: grid;
gap: var(--gap-articles-list);
grid-template-columns: repeat(var(--grid-columns), minmax(var(--width-card-min), 1fr));
overflow: auto;
}

View File

@@ -0,0 +1,53 @@
#big-logo {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--gap-big-logo);
margin: var(--margin-big-logo);
img {
margin: auto;
}
hgroup {
flex: 1;
h1 {
font-size: 4rem;
font-variant: small-caps;
color: var(--color-big-logo-title);
text-shadow: var(--shadow-big-logo-title);
white-space: nowrap;
}
p {
font-style: italic;
font-size: 1.5rem;
color: var(--color-big-logo-description);
}
}
}
@media (max-width: 460px) {
#big-logo hgroup {
h1 {
font-size: 2.5rem;
}
p {
font-size: 1.25rem;
}
}
}
@media (max-width: 768px) {
#big-logo hgroup {
h1 {
text-align: center;
}
p {
text-align: center;
}
}
}

View File

@@ -0,0 +1,20 @@
body {
font-family: var(--font-family);
font-size: var(--font-size-body);
background: var(--background-body);
color: var(--color-text);
padding: var(--padding-body);
/* On utilise flex pour que le footer colle au pied de page */
display: flex;
flex-direction: column;
gap: var(--gap-body);
min-height: 100vh;
height: auto;
}
@media (max-width: 768px) {
body {
padding: 0;
}
}

View File

@@ -0,0 +1,5 @@
.breadcrumbs {
display: flex;
flex-wrap: wrap;
gap: var(--gap-half);
}

View File

@@ -0,0 +1,54 @@
.card {
text-decoration: none;
color: inherit;
font-variant: small-caps;
font-size: 1rem;
background-size: cover;
background-position: top center;
background-repeat: no-repeat;
padding: 0;
display: flex;
flex-direction: column;
box-shadow: none;
h3 {
font-weight: normal;
text-wrap: balance;
color: var(--color-card-title);
font-size: var(--font-size-card-title);
}
.card-image {
background-size: cover;
background-position: 50% 50%;
height: 220px;
display: block;
border-radius: var(--radius-base) var(--radius-base) 0 0;
background-image: var(--background-figure);
}
.card-content {
display: flex;
flex-direction: column;
padding: var(--padding-card-content);
gap: var(--gap-card-content);
flex: 1;
border-radius: 0 0 var(--radius-base) var(--radius-base);
h3 {
flex: 1;
}
.card-meta {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
}
&:hover {
h3 {
text-decoration: underline;
}
}
}

View File

@@ -0,0 +1,98 @@
figure {
border: var(--border-panel-outer);
border-top: var(--border-panel-top);
background: var(--background-figure);
border-radius: var(--radius-base);
box-shadow: var(--shadow-base);
margin: var(--margin) auto;
font-size: 1rem;
text-align: center;
padding: var(--padding) 0;
figcaption {
padding: 0 var(--padding) var(--padding) var(--padding);
p {
color: var(--color-text-muted);
font-style: italic;
max-width: var(--width-content-max);
font-size: 1rem;
text-wrap: balance;
font-weight: bold;
text-align: center;
margin: auto;
line-height: 150%;
em {
color: var(--color-text-strong);
}
}
}
details,
p.details {
padding: var(--padding) var(--padding) 0 var(--padding);
max-width: var(--width-content-max);
text-align: center;
text-wrap: balance;
margin: auto;
line-height: 150%;
}
audio {
margin: auto;
padding: var(--padding);
}
img,
video {
max-height: 80vh;
max-width: 100%;
}
img {
background-color: var(--color-figure-media-background);
}
&.chat-message {
clear: both;
display: inline;
width: 40vw;
min-width: 270px;
margin: 0 auto;
position: relative;
padding: var(--padding);
&.me,
&.other {}
&.me {
background: var(--background-chat-me);
margin-right: 11vw;
}
&.other {
background: var(--background-chat-other);
margin-left: 11vw;
}
blockquote {
text-align: left;
display: flex;
font-style: normal;
flex-direction: column;
gap: calc(var(--gap)/2);
line-height: 130%;
p {
width: 100%;
text-align: left;
}
ul,
ol {
margin-left: var(--margin);
}
}
}
}

View File

@@ -0,0 +1,44 @@
body>footer {
display: flex;
gap: var(--gap-footer);
flex-wrap: wrap;
color: var(--color-footer-text);
padding: var(--footer-padding);
a {
color: var(--color-footer-text);
text-decoration: underline;
&:hover,
&:focus {
color: var(--color-footer-heading);
}
}
section {
flex: 1;
text-align: center;
font-variant: small-caps;
header {
padding-bottom: var(--padding);
h2 {
font-size: 1.2rem;
color: var(--color-footer-heading);
}
}
nav {
display: flex;
flex-direction: column;
gap: var(--gap-footer-nav);
}
}
p {
text-align: center;
width: 100%;
text-wrap: balance;
}
}

View File

@@ -0,0 +1,38 @@
header#hero-page {
display: flex;
gap: var(--gap-hero-page);
flex-direction: column;
.sup-title {
text-align: center;
font-variant: small-caps;
text-shadow: var(--shadow-text);
color: var(--color-site-title);
}
h1 {
text-align: center;
font-size: 1.25em;
text-wrap: balance;
color: var(--color-site-title);
text-shadow: var(--shadow-text);
font-variant: small-caps;
font-weight: normal;
}
}
@media (min-width: 460px) {
header#hero-page {
h1 {
font-size: 2.5rem;
}
}
}
@media (min-width: 768px) {
header#hero-page {
h1 {
font-size: 4rem;
}
}
}

View File

@@ -0,0 +1,6 @@
header#hero {
display: flex;
flex-wrap: wrap;
gap: var(--gap-hero);
align-items: center;
}

View File

@@ -0,0 +1,22 @@
main#home {
section {
margin: var(--margin-home-section);
header {
font-variant: small-caps;
margin: var(--margin-home-section-header);
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--gap-half);
a {
color: var(--color-home-link);
&:hover {
color: var(--color-home-link-hover);
}
}
}
}
}

View File

@@ -0,0 +1,13 @@
hr {
all: unset;
display: block;
width: 100%;
height: 1rem;
margin: auto;
position: relative;
background: var(--background-hr-glow);
&.mirror {
background: var(--background-hr-glow-mirror);
}
}

View File

@@ -0,0 +1,27 @@
@import "variables.css";
@import "reset.css";
@import "body.css";
@import "links.css";
@import "panel.css";
@import "hero.css";
@import "big-logo.css";
@import "site-stats.css";
@import "hr.css";
@import "stat.css";
@import "stats.css";
@import "main.css";
@import "home-section.css";
@import "breadcrumbs.css";
@import "articles-list.css";
@import "card.css";
@import "footer.css";
@import "hero-page.css";
@import "site-title.css";
@import "page-meta.css";
@import "page-links.css";
@import "article-body.css";
@import "figure.css";
@import "table.css";
@import "pagination.css";
@import "table-of-contents.css";
@import "a.css";

View File

@@ -0,0 +1,9 @@
a {
color: var(--color-link);
text-decoration: underline;
&:hover,
&:focus {
color: var(--color-link-hover);
}
}

View File

@@ -0,0 +1,6 @@
main {
display: flex;
flex-direction: column;
gap: var(--gap-main);
flex: 1;
}

View File

@@ -0,0 +1,5 @@
nav {
ul {
list-style: none;
}
}

View File

@@ -0,0 +1,7 @@
nav#page-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: var(--gap-page-links);
}

View File

@@ -0,0 +1,13 @@
.page-meta {
gap: var(--gap-page-meta);
display: flex;
flex-wrap: wrap;
align-items: center;
color: var(--color-page-meta);
font-variant: small-caps;
>* {
white-space: nowrap;
margin: auto;
}
}

View File

@@ -0,0 +1,58 @@
.pagination {
display: flex;
justify-content: space-between;
.prev {
&.disabled {
color: var(--color-text-muted);
}
}
details {
flex: 1;
text-align: center;
position: relative;
summary {
cursor: pointer;
}
ul {
position: absolute;
display: flex;
flex-direction: column;
gap: var(--gap-half);
overflow: auto;
max-height: 50vh;
min-width: 300px;
width: auto;
left: 50%;
margin-left: -150px;
padding: var(--padding);
list-style: none;
border-radius: var(--radius-pagination);
box-shadow: var(--shadow-pagination);
border: var(--border-pagination);
background: var(--background-pagination);
li {
font-size: 1rem;
.current {
display: block;
font-size: 1rem;
}
a {
display: block;
}
}
}
}
.next {
&.disabled {
color: var(--color-text-muted);
}
}
}

View File

@@ -0,0 +1,14 @@
.panel {
padding: var(--padding-panel);
border-radius: var(--radius-panel);
box-shadow: var(--shadow-panel);
border: var(--border-panel);
&.panel-hero {
background: var(--background-panel);
}
&.stat {
background: var(--background-panel-stat);
}
}

View File

@@ -0,0 +1,5 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

View File

@@ -0,0 +1,3 @@
section#site-stats {
margin: var(--margin-site-stats);
}

View File

@@ -0,0 +1,21 @@
#site-title {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--gap-site-title);
font-size: 2rem;
color: var(--color-site-title);
font-variant: small-caps;
font-weight: bold;
text-decoration: none;
text-shadow: var(--shadow-text);
justify-content: center;
span {
white-space: nowrap;
}
&:hover {
text-decoration: underline;
}
}

View File

@@ -0,0 +1,19 @@
.stat {
display: flex;
flex-direction: column;
gap: var(--gap-half);
strong {
display: block;
font-variant: small-caps;
color: var(--color-text-muted);
white-space: nowrap;
}
span {
font-size: 2rem;
color: var(--color-panel-text-stats);
font-weight: bold;
flex: 1;
}
}

View File

@@ -0,0 +1,13 @@
.stats {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: var(--gap-site-stats-list);
margin: var(--margin-site-stats-list);
>div {
flex: 1;
text-align: center;
min-width: 250px;
}
}

View File

@@ -0,0 +1,24 @@
#TableOfContents {
font-size: 1.25rem;
text-align: left;
padding: var(--padding);
max-width: var(--width-content-max);
display: flex;
flex-direction: column;
gap: var(--gap-half);
ol ol {
margin-left: var(--margin);
}
ol,
li {
display: flex;
flex-direction: column;
gap: var(--gap-half);
}
a {
display: block;
}
}

View File

@@ -0,0 +1,46 @@
table {
max-width: 100%;
border-collapse: collapse;
margin: var(--margin) auto;
line-height: 1.5;
border: var(--border-panel-outer);
font-size: 1.2rem;
}
thead {
background: var(--background-panel-stats);
font-weight: bold;
}
thead th {
padding: var(--padding-half) var(--padding);
text-align: left;
white-space: nowrap;
}
tbody td {
padding: var(--padding-half) var(--padding);
vertical-align: top;
text-align: left;
}
/* Alternance des lignes */
tbody tr:nth-child(even) td {
background-color: var(--background-body-alt);
}
/* Survol ligne */
tbody tr:hover td {
background-color: var(--color-hr-glow);
}
/* Survol cellule */
tbody td:hover {
background-color: var(--color-hr-glow);
}
/* Pied du tableau */
tfoot td {
padding: var(--padding-half) var(--padding);
font-style: italic;
}

View File

@@ -0,0 +1,4 @@
@import "variables/colors.css";
@import "variables/fonts.css";
@import "variables/structure.css";
@import "variables/aesthetics.css";

View File

@@ -0,0 +1,19 @@
@import "colors/gray.css";
@import "colors/blue.css";
@import "colors/indigo.css";
@import "colors/purple.css";
@import "colors/pink.css";
@import "colors/magenta.css";
@import "colors/red.css";
@import "colors/orange.css";
@import "colors/amber.css";
@import "colors/yellow.css";
@import "colors/lime.css";
@import "colors/green.css";
@import "colors/teal.css";
@import "colors/cyan.css";
@import "colors/brown.css";
:root {
--transparent: rgba(0, 0, 0, 0);
}

View File

@@ -0,0 +1,12 @@
:root {
--amber-100: #FFEFD9;
--amber-300: #FFD08C;
--amber-500: #FFA93D;
--amber-700: #BF6A0E;
/* --- */
--amber-200: #ff0000; /** Volontairement non définie **/
--amber-400: #ff0000; /** Volontairement non définie **/
--amber-600: #ff0000; /** Volontairement non définie **/
--amber-800: #ff0000; /** Volontairement non définie **/
--amber-900: #ff0000; /** Volontairement non définie **/
}

View File

@@ -0,0 +1,12 @@
:root {
--blue-100: #E4F0FF;
--blue-300: #98C0FF;
--blue-500: #467FFF;
--blue-700: #1C4FBF;
/* --- */
--blue-200: #ff0000; /** Volontairement non définie **/
--blue-400: #ff0000; /** Volontairement non définie **/
--blue-600: #ff0000; /** Volontairement non définie **/
--blue-800: #ff0000; /** Volontairement non définie **/
--blue-900: #ff0000; /** Volontairement non définie **/
}

View File

@@ -0,0 +1,12 @@
:root {
--brown-100: #F4E8DF;
--brown-300: #D6B599;
--brown-500: #A7795B;
--brown-700: #6B4633;
/* --- */
--brown-200: #ff0000; /** Volontairement non définie **/
--brown-400: #ff0000; /** Volontairement non définie **/
--brown-600: #ff0000; /** Volontairement non définie **/
--brown-800: #ff0000; /** Volontairement non définie **/
--brown-900: #ff0000; /** Volontairement non définie **/
}

View File

@@ -0,0 +1,12 @@
:root {
--cyan-100: #E1FAFF;
--cyan-300: #8EE8FF;
--cyan-500: #2FC4FF;
--cyan-700: #007EAC;
/* --- */
--cyan-200: #ff0000; /** Volontairement non définie **/
--cyan-400: #ff0000; /** Volontairement non définie **/
--cyan-600: #ff0000; /** Volontairement non définie **/
--cyan-800: #ff0000; /** Volontairement non définie **/
--cyan-900: #ff0000; /** Volontairement non définie **/
}

View File

@@ -0,0 +1,12 @@
:root {
--gray-0: #FFFFFF;
--gray-100: #F5F7FA;
--gray-200: #E8ECF2;
--gray-300: #D9E0E8;
--gray-400: #CAD3DD;
--gray-500: #B0B7C4;
--gray-600: #969CAB;
--gray-700: #7C8392;
--gray-800: #333746;
--gray-900: #0F1114;
}

View File

@@ -0,0 +1,12 @@
:root {
--green-100: #E3F9E5;
--green-300: #8FE4A2;
--green-500: #40C474;
--green-700: #207A47;
/* --- */
--green-200: #ff0000; /** Volontairement non définie **/
--green-400: #ff0000; /** Volontairement non définie **/
--green-600: #ff0000; /** Volontairement non définie **/
--green-800: #ff0000; /** Volontairement non définie **/
--green-900: #ff0000; /** Volontairement non définie **/
}

View File

@@ -0,0 +1,12 @@
:root {
--indigo-100: #E6E9FF;
--indigo-300: #A9B4FF;
--indigo-500: #5D6CFF;
--indigo-700: #2A36C4;
/* --- */
--indigo-200: #ff0000; /** Volontairement non définie **/
--indigo-400: #ff0000; /** Volontairement non définie **/
--indigo-600: #ff0000; /** Volontairement non définie **/
--indigo-800: #ff0000; /** Volontairement non définie **/
--indigo-900: #ff0000; /** Volontairement non définie **/
}

View File

@@ -0,0 +1,12 @@
:root {
--lime-100: #F0FCD9;
--lime-300: #C3F58A;
--lime-500: #86E23B;
--lime-700: #519214;
/* --- */
--lime-200: #ff0000; /** Volontairement non définie **/
--lime-400: #ff0000; /** Volontairement non définie **/
--lime-600: #ff0000; /** Volontairement non définie **/
--lime-800: #ff0000; /** Volontairement non définie **/
--lime-900: #ff0000; /** Volontairement non définie **/
}

View File

@@ -0,0 +1,12 @@
:root {
--magenta-100: #FFE0F1;
--magenta-300: #FFA4D0;
--magenta-500: #FF5BA6;
--magenta-700: #CC1F75;
/* --- */
--magenta-200: #ff0000; /** Volontairement non définie **/
--magenta-400: #ff0000; /** Volontairement non définie **/
--magenta-600: #ff0000; /** Volontairement non définie **/
--magenta-800: #ff0000; /** Volontairement non définie **/
--magenta-900: #ff0000; /** Volontairement non définie **/
}

View File

@@ -0,0 +1,12 @@
:root {
--orange-100: #FFE8DE;
--orange-300: #FFAC85;
--orange-500: #FF733D;
--orange-700: #C23C0D;
/* --- */
--orange-200: #ff0000; /** Volontairement non définie **/
--orange-400: #ff0000; /** Volontairement non définie **/
--orange-600: #ff0000; /** Volontairement non définie **/
--orange-800: #ff0000; /** Volontairement non définie **/
--orange-900: #ff0000; /** Volontairement non définie **/
}

View File

@@ -0,0 +1,12 @@
:root {
--pink-100: #FFE5F4;
--pink-300: #FF9CD3;
--pink-500: #FF54B0;
--pink-700: #C0227F;
/* --- */
--pink-200: #ff0000; /** Volontairement non définie **/
--pink-400: #ff0000; /** Volontairement non définie **/
--pink-600: #ff0000; /** Volontairement non définie **/
--pink-800: #ff0000; /** Volontairement non définie **/
--pink-900: #ff0000; /** Volontairement non définie **/
}

View File

@@ -0,0 +1,12 @@
:root {
--purple-100: #F3E7FF;
--purple-300: #D2AAF7;
--purple-500: #9E63E9;
--purple-700: #6330A9;
/* --- */
--purple-200: #ff0000; /** Volontairement non définie **/
--purple-400: #ff0000; /** Volontairement non définie **/
--purple-600: #ff0000; /** Volontairement non définie **/
--purple-800: #ff0000; /** Volontairement non définie **/
--purple-900: #ff0000; /** Volontairement non définie **/
}

View File

@@ -0,0 +1,12 @@
:root {
--red-100: #FFE5E7;
--red-300: #FF939B;
--red-500: #FF4D5A;
--red-700: #C0202E;
/* --- */
--red-200: #ff0000; /** Volontairement non définie **/
--red-400: #ff0000; /** Volontairement non définie **/
--red-600: #ff0000; /** Volontairement non définie **/
--red-800: #ff0000; /** Volontairement non définie **/
--red-900: #ff0000; /** Volontairement non définie **/
}

View File

@@ -0,0 +1,12 @@
:root {
--teal-100: #E0FAF7;
--teal-300: #7EE1D4;
--teal-500: #32B9AB;
--teal-700: #197C70;
/* --- */
--teal-200: #ff0000; /** Volontairement non définie **/
--teal-400: #ff0000; /** Volontairement non définie **/
--teal-600: #ff0000; /** Volontairement non définie **/
--teal-800: #ff0000; /** Volontairement non définie **/
--teal-900: #ff0000; /** Volontairement non définie **/
}

View File

@@ -0,0 +1,16 @@
:root {
--yellow-100: #FFF8D6;
--yellow-300: #FFE68A;
--yellow-500: #F9CB2F;
--yellow-700: #B58506;
--yellow-900: #713F12;
/* --- */
--yellow-200: #ff0000;
/** Volontairement non définie **/
--yellow-400: #ff0000;
/** Volontairement non définie **/
--yellow-600: #ff0000;
/** Volontairement non définie **/
--yellow-800: #ff0000;
/** Volontairement non définie **/
}

View File

@@ -0,0 +1,15 @@
:root {
--font-family: system-ui,
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
Oxygen,
Ubuntu,
Cantarell,
'Open Sans',
'Helvetica Neue',
sans-serif;
--font-size-body: 20px;
--font-size-card-title: 1.5rem;
}

View File

@@ -0,0 +1,43 @@
:root {
--padding: 1rem;
--padding-half: 0.5rem;
--padding-double: 2rem;
--padding-body: var(--padding);
--padding-panel: var(--padding);
--padding-card-content: var(--padding);
--padding-hero-panel: var(--padding-panel);
--footer-padding: var(--padding);
--list-padding: var(--padding-double);
--gap: 1.5rem;
--gap-half: 0.75rem;
--gap-third: 0.5rem;
--gap-body: var(--gap);
--gap-card-content: var(--gap-half);
--gap-hero: var(--gap-body);
--gap-big-logo: var(--gap-hero);
--gap-site-stats-list: var(--gap-hero);
--gap-main: var(--gap-body);
--gap-articles-list: var(--gap-main);
--gap-footer: var(--gap-main);
--gap-footer-nav: var(--gap-half);
--gap-hero-page: var(--gap-hero);
--gap-site-title: var(--gap-half);
--gap-page-meta: var(--gap-half);
--gap-page-links: var(--gap);
--gap-list: var(--gap-third);
--margin: 2rem;
--margin-half: 1rem;
--margin-big-logo: auto;
--margin-site-stats: auto;
--margin-site-stats-list: var(--margin) auto;
--margin-home-section: var(--margin) 0 0 0;
--margin-home-section-header: 0 0 var(--margin-half) 0;
--width-content-min: 300px;
--width-content-max: 48rem;
--grid-columns: 4;
--width-card-min: 300px;
}