:root {
    --color-category-math: #6c2bd9;
    --color-category-money: #0b6b57;
    --color-category-time: #96500a;
    --color-category-converters: #1d57b5;
    --color-category-answers: #77298a;
}

.category-motif,
.locale-motif {
    pointer-events: none;
    user-select: none;
}

.category-motif svg,
.locale-motif svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.category-motif svg {
    stroke-width: 4;
}

.category-motif__piece,
.locale-motif__piece {
    fill: currentColor;
    stroke: none;
}

.category-motif--math { color: var(--color-category-math); }
.category-motif--money { color: var(--color-category-money); }
.category-motif--time { color: var(--color-category-time); }
.category-motif--converters { color: var(--color-category-converters); }
.category-motif--answers { color: var(--color-category-answers); }

.category-motif--page {
    position: absolute;
    top: 2rem;
    right: 0;
    z-index: 0;
    width: clamp(7rem, 12vw, 9rem);
    opacity: .085;
}

.catalog-section__intro {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-6);
}

.catalog-section__intro > div:first-child {
    max-width: 38rem;
    min-width: 0;
}

.category-motif--section {
    width: 5rem;
    flex: 0 0 5rem;
    opacity: .58;
}

.category-motif--section.category-motif--money {
    width: 4.5rem;
    flex-basis: 4.5rem;
}

.home-category__heading .category-motif--section {
    width: 3.75rem;
    flex-basis: 3.75rem;
    opacity: .44;
}

.home-category__heading .category-motif--section.category-motif--money {
    width: 3.4rem;
    flex-basis: 3.4rem;
}

.locale-motif {
    position: absolute;
    top: 9.5rem;
    right: .25rem;
    z-index: 0;
    width: 6.25rem;
    color: var(--color-accent);
    opacity: .045;
}

.locale-motif svg {
    stroke-width: 3;
}

html[lang="fr"] .category-motif--page {
    display: none;
}

@media (max-width: 40rem) {
    .category-motif--page {
        top: 1rem;
        width: 5.75rem;
        opacity: .055;
    }

    .catalog-section__intro {
        gap: var(--space-4);
    }

    .category-motif--section {
        width: 4rem;
        flex-basis: 4rem;
        opacity: .48;
    }

    .category-motif--section.category-motif--money {
        width: 3.6rem;
        flex-basis: 3.6rem;
    }

    .home-category__heading .category-motif--section {
        width: 3.25rem;
        flex-basis: 3.25rem;
    }

    .home-category__heading .category-motif--section.category-motif--money {
        width: 3rem;
        flex-basis: 3rem;
    }

    .locale-motif {
        display: none;
    }
}

@media (max-width: 22rem) {
    .catalog-section__intro {
        display: grid;
    }

    .category-motif--section {
        width: 3.5rem;
        justify-self: end;
    }

    .category-motif--section.category-motif--money {
        width: 3.15rem;
    }
}

@media (forced-colors: active) {
    .category-motif,
    .locale-motif {
        display: none;
    }
}