:root {
    --primary-color-100: rgb(255, 255, 255);
    --primary-color-90: rgb(255, 255, 50);
    --primary-color-80: rgb(255, 255, 119);

    --secondary-color-100:rgb(187, 248, 170);

    --max-width: 1200px;

    --meaasure-s: 1rem;
    --meaasure-m: 2rem;
    --meaasure-l: 3rem;
    --meaasure-xl: 4rem;
    
}

html {
    font-size: 16px;
}

/*.sticky {
    position: sticky;
    top: 1rem;
}
*/

body {
    background-color: rgb(214, 214, 214);
    margin: 1rem;
}

.border-bottom {
    border-bottom: solid 0.35rem black;
    
    padding: 1rem;
    
    background-color: var(--primary-color-100);
    border-radius: var(--meaasure-m);
    max-width: var(--max-width);
}

.font-xl {
    font-size: 4rem;
    font-family: 'Inter', sans-serif;
    font-weight: 900;
}

.font-s {
    font-size: var(--meaasure-m);
    font-family: 'Inter', sans-serif;
    font-weight: 900;
}


.margin-auto {
    margin: auto;
}

/* .parent-box {
    display: grid;
    max-width: 1200px;
    grid-template-columns: 1fr 1fr;
    padding: 1rem;
    gap: 1rem;
    background-color: var(--secondary-color-100);
    border-radius: 3rem;
}

.child-item {
    border-bottom: solid 0.35rem black;
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    padding: var(--meaasure-m);
    background-color: rgb(44, 211, 253);
    border-radius: var(--meaasure-m);
    width: auto;
    height: 300px;;
    
} */

.parent-box {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    
    gap: 0.5rem;
    max-width: var(--max-width);
    
    padding: 1rem;

    border-radius: var(--meaasure-m);
    background-color: var(--primary-color-100);
    
}

.child-item {
    width: auto;
    height: 10rem;
    background-color: var(--secondary-color-100);
    border-radius: var(--meaasure-m);
    padding: 1rem;

}