/* - Mobile: 375px
- Desktop: 1440px


- Yellow: hsl(47, 88%, 63%)

- White: hsl(0, 0%, 100%)

- Gray 500: hsl(0, 0%, 42%)
- Gray 950: hsl(0, 0%, 7%)


- Family: [Figtree](https://fonts.google.com/specimen/Figtree)
- Weights: 500, 800 */
@font-face {
    font-family: "Figtree";
    src: url("../assets/fonts/Figtree-VariableFont_wght.ttf") format("truetype");
}

:root {
    --yellow: hsl(47, 88%, 63%);

    --white: hsl(0, 0%, 100%);

    --gray-500: hsl(0, 0%, 42%);
    --gray-950: hsl(0, 0%, 7%);

    --font-principal: "Figtree";
}

*, *:before, *:after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
    display: block;
}
img {
    width: 100%;
}
body {
    font-size: 1rem;
    background-color: var(--yellow);
    font-family: var(--font-principal);
}
.container {
    width: min(90%, 75rem);
    margin: 0 auto;
}
.card {
    margin: 4rem auto;
    max-width: 20rem;
    background-color: var(--white);
    padding: 1.5rem;
    border: 1px black solid;
    border-radius: 1.25rem;
    box-shadow: 0.4rem 0.4rem 0.1rem black;
}
.portada-blog {
    border-radius: 0.75rem;
}
.tag {
    display: inline-block;
    background-color: var(--yellow);
    font-weight: 800;
    padding: 0.4rem 0.75rem;
    font-size: 0.90rem;
    border-radius: 0.25rem;
    margin: 1rem 0;
}
.date {
    margin-bottom: 1.5rem;
    color: var(--gray-950);
}
.title {
    font-weight: 800;
    color: black;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}
.title:hover {
    color: var(--yellow);
}
.description {
    margin-bottom: 1.5rem;
    color: var(--gray-500)
}
.owner-post {
    display: flex;
    align-items: center;
    column-gap: 1rem;
}
.owner-img {
    width: 2rem;
}
.name {
    font-weight: 800;
    font-size: 0.9rem;
}