@font-face {
    font-family: 'figtree';
    src: url('assets/fonts/Figtree-VariableFont_wght.ttf');
}

:root {
    --Yellow: hsl(47, 88%, 63%);
    --White: hsl(0, 0%, 100%);
    --Gray-500: hsl(0, 0%, 42%);
    --Gray-950: hsl(0, 0%, 7%);
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--Yellow);
    display: grid;
    place-content: center;
    min-height: 100vh;
    font-family: 'figtree';
}

.wrapper {
    background-color: var(--White);
    width: 360px;
    min-height: 460px;
    border-radius: 20px;
    border: 1.4px solid;
    box-shadow: 8px 8px 0 var(--Gray-950);
    padding: 16px;
}

.wrapper img {
    width: 100%;
    border-radius: 14px;
}

.wrapper h4 {
    background-color: var(--Yellow);
    width: 80px;
    padding: 4px 6px;
    border-radius: 4px;
}

.wrapper h4,
.publish-date,
.wrapper h2,
.wrapper p {
    margin-top: 16px;
}

.publish-date {
    font-size: 14px;
    font-weight: 600;
}

.wrapper h2 {
    font-weight: 800;
}

.wrapper p {
    color: var(--Gray-500);
    font-weight: 500;
}

.profile {
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.profile img {
    width: 34px;
    margin-right: 8px;
}

.profile h3 {
    font-size: 14px;
    font-weight: 800;
}

@media (max-width: 400px) {
    .wrapper {
        width: 320px;
    }
}