@font-face {
  font-family: "Figtree";
  src: url("./assets/fonts/Figtree-VariableFont_wght.ttf") format("truetype");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("./assets/fonts/Figtree-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

:root {
    --color-yellow: hsl(47, 88%, 63%);
    --color-white: hsl(0, 0%, 100%);
    --color-black: hsl(0, 0%, 0%);
    --color-gray-500: hsl(0, 0%, 42%);
    --color-gray-950: hsl(0, 0%, 7%);
    
    --radius: 1.25rem; /* 20px */

    /* Fonts */
    --font-figtree: 'Figtree', Arial, Helvetica, sans-serif;
    --fs-heading: clamp(1.25rem, 1.162rem + 0.3756vw, 1.5rem);
    --fs-preset-2: 1rem; /* 16px */
    --fs-preset-3: 0.875rem; /* 14px */

    /* Gaps */
    --space-50: .25rem; /* 4px */
    --space-100: .5rem; /* 8px */
    --space-150: .75rem; /* 12px */
    --space-300: 1.5rem; /* 24px */
}

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

@layer base {
    body {
        background-color: var(--color-yellow);
        font-family: var(--font-figtree);
        margin: 0;
    }

    main, h1, h2, h3, p {
        margin: 0;
    }
}

@layer layout {
    .container {
        display: grid;
        height: 100vh;
        place-items: center;
        margin: 0;
    }
}

@layer utilities {
    .blog-post {
        background-color: var(--color-white);
        border-radius: var(--radius);
        padding-inline: var(--space-300);
        padding-block-end: var(--space-300);
        border: 1px solid var(--color-black);
        box-shadow: 0.5rem 0.5rem var(--color-black);
    }

    .blog-post__content {
        display: grid;
        row-gap: var(--space-150);
    }

    .blog-post__banner {
        margin-block: var(--space-300);
        margin-inline: auto;
    }

    .blog-post__image {
        border-radius: calc(var(--radius) / 2);
        display: block;
        width: 100%;
    }

    .blog-post__label {
        background-color: var(--color-yellow);
        border-radius: calc(var(--radius) / 5);
        display: inline-block;
        font-size: var(--fs-preset-3);
        font-weight: 800;
        padding-inline: var(--space-150);
        padding-block: var(--space-50);
        line-height: 1.5;
        text-align: center;
        width: 82px;
    }

    .blog-post__date {
        font-size: var(--fs-preset-3);
        font-weight: 500;
    }

    .blog-post__heading {
        font-size: var(--fs-heading);
        font-weight: 800;
        transition: 120ms ease-in-out;
        transition-property: color;
        cursor: pointer;

        &:hover, &:focus {
            color: var(--color-yellow);
        }

    }

    .blog-post__text {
        color: var(--color-gray-500);
        font-size: var(--fs-preset-2);
        line-height: 1.5;
        margin-block-end: var(--space-150);
    }

    .blog-post__author {
        display: flex;
        align-items: center;
        font-size: var(--fs-preset-3);
        font-weight: 800;
        gap: var(--space-150);
    }
}

@layer responsive {
    @media (min-width: 23.438rem) {
        .blog-post {
            max-width: 384px;
        }
    }

    @media (max-width: 23.375rem) {
        .blog-post {
            width: 327px;
        }
    }
}