@font-face {
    font-family: Figtree;
    src: url("assets/fonts/Figtree-VariableFont_wght.ttf");
    font-weight: 100 900;
    font-display: swap;
}

:root {
    /*color*/
    --clr-yellow: #F4D04E;
    --clr-gray-950: #111111;
    --clr-gray-500: #6B6B6B;
    --clr-white: #ffffff;

    /*fonts*/

    --ff-figtree: "figtree", system-ui, sans-serif;

    /* font-size*/

    --fs-xl: 1.5rem;
    --fs-lg: 1.25rem;
    /* 20/16 */
    --fs-md: 1rem;
    --fs-sm: .875rem;
    /* 14/16 */
    --fs-xs: .75rem;
    /* 12/16 */

    /**/

    --fw-medium: 500;
    --fw-rxtra-bold: 800;

}

/* CSS RESET*/


*,
*::before,
*::after {
    box-sizing: border-box;
}


* {
    margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        interpolate-size: allow-keywords;
        scroll-behavior: smooth;
    }
}

body {

    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}


img,
picture,
video,
canvas,
svg {

    max-width: 100%;
    height: auto;
}

input,
button,
textarea,
select {
    font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

p {
    text-wrap: pretty;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
}


#root,
#__next {
    isolation: isolate;
}

body {
    background-color: var(--clr-yellow);
    font-family: var(--ff-figtree);
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    color: var(--clr-gray-950);
    min-height: 100vh;
    display: grid;
    place-content: center;
}

.card {
    background-color: var(--clr-white);
    max-width: 384px;
    border-radius: 20px;
    border: 1px solid black;
    box-shadow: 8px 8px;
    padding: 24px;

     @media screen and (max-width:480px){ 
        max-width: 327px;
        margin: 24px;
    }
}

.card__image {
    border-radius: 10px;
    border: 1px solid black;
    max-width: 336px;
    

    @media screen and (max-width:480px){
        max-width:279px; 
        
        border-radius: 10px;
        border: 1px solid black;
    }

}

.card__content {
    margin-top: 24px;
}

.card__category {
    font-size: var(--fs-sm);
    font-weight: var(--fw-rxtra-bold);
    padding: 4px 12px;
    background-color: var(--clr-yellow);
    width: fit-content;
    border-radius: 4px;

    @media screen and (max-width:480px){
        font-size: var(--fs-xs);
    }
}

.card__date {
    font-size: var(--fs-sm);
    margin: 12px 0;

     @media screen and (max-width:480px){
        font-size: var(--fs-xs);
    }
}

.card__title {
    font-size: var(--fs-xl);

     @media screen and (max-width:480px){
        font-size: var(--fs-lg);
    }
}

.card__subtitle {
    font-size: var(--fs-md);
    color: var(--clr-gray-500);
    margin-top: 12px;

     @media screen and (max-width:480px){
        font-size: var(--fs-md);
    }
}

.card__user-info {
    display: flex;
    gap: 5.5px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-rxtra-bold);
    margin-top: 24px;
    align-items: center;

}