:root {
    --clamp-s: clamp(1rem, 0.925rem + 0.375vw, 1.375rem);

    --step--2: clamp(0.969rem, 0.7752rem + 0.969vw, 1.9381rem);
    --step--1: clamp(1.3702rem, 1.0962rem + 1.3702vw, 2.7405rem);
    --step-0: clamp(1.9375rem, 1.55rem + 1.9375vw, 3.875rem);
    --step-1: clamp(2.7396rem, 2.1917rem + 2.7396vw, 5.4792rem);
    --step-2: clamp(3.8738rem, 3.0991rem + 3.8738vw, 7.7477rem);
    --step-3: clamp(5.4776rem, 4.3821rem + 5.4776vw, 10.9552rem);
    --step-4: clamp(7.7453rem, 6.1963rem + 7.7453vw, 15.4906rem);
    --step-5: clamp(10.9519rem, 8.7615rem + 10.9519vw, 21.9038rem);

    --space-m: clamp(2.75rem, 2.2rem + 2.75vw, 5.5rem);
    --space-l: clamp(3.875rem, 3.1rem + 3.875vw, 7.75rem);
}

body {
    margin: 0;
    padding: var(--clamp-s);
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: "IBM Plex Sans Thai Looped", serif;
    box-sizing: border-box;
}

#combinaisons {
    max-width: 1000px;
}

#combinaisons > div{
    font-size: var(--step-0);

    height: fit-content;
    width: fit-content;

    padding: var(--space-l);

    margin-bottom: var(--space-m);

    position: relative;
}

#combinaisons > div::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgb(243, 117, 138), orange);
    border-radius: var(--step-0);
    z-index: -1;
    transform: rotate(-5deg);
}

h1 {
    font-size: var(--step-2);
}

span {
    font-weight: 600;
}