/* Set Up Variables */
:root {
    --color-dark-cyan       : hsl(158, 36%, 37%);
    --color-dark-cyan-hover : hsl(156deg 42% 18%);
    --color-cream           : hsl(30, 38%, 92%);

    --color-dark-blue       : hsl(228, 12%, 48%);
    --color-white           : hsl(0, 0%, 100%);
    --color-black           : hsl(0, 0%, 0%);

    --size-xs               : 0.625rem;
    --size-sm               : clamp(1.13rem, calc(0.95rem + 0.75vw), 1.63rem);
    --size-md               : clamp(1.50rem, calc(1.32rem + 0.75vw), 2.00rem);
    --size-padding          : clamp(1.50rem, calc(1.32rem + 0.75vw), 2.00rem);

    --font-plain            : "Montserrant", system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
    --font-headings         : "Fraunces", system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
    --font-size-0           : clamp(0.88rem, calc(0.79rem + 0.38vw), 1.13rem);
    --font-size-3           : 2rem;
}

@font-face {
    font-family  : "Montserrant";
    src          : url("/assets/Montserrat-VariableFont_wght.ttf");
    font-style   : normal;
    font-display : swap;
}

@font-face {
    font-family  : "Fraunces";
    src          : url("/assets/Fraunces-VariableFont_SOFT,WONK,opsz,wght.ttf");
    font-style   : normal;
    font-display : swap;
}

body {
    font-family      : var(--font-plain);
    background-color : var(--color-cream);
    display          : grid;
    place-content    : center;
    font-size        : 0.875rem;
    font-weight      : 500;
    color            : var(--color-dark-blue);
    padding          : var(--size-padding);
}

img {
    inline-size : 100%;
    block-size  : 100%;
    object-fit  : cover;
}

/*
 * Product Card
 */
.product-card {
    border-radius         : var(--size-xs);
    overflow              : hidden;
    background-color      : var(--color-white);
    display               : grid;
    grid-template-columns : repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    max-inline-size       : 600px;
}

.product-card__info {
    padding : var(--size-padding);
}

.product-card__info > * + * {
    --flow             : var(--size-md);
    margin-block-start : var(--flow);
}

.product-card__info h3 {
    --flow : var(--size-sm);
    color  : var(--color-black);
}

.product-card__info .price {
    display     : flex;
    align-items : center;
    gap         : var(--size-sm);
}

.button {
    cursor           : pointer;
    display          : inline-flex;
    align-items      : center;
    justify-content  : center;
    gap              : var(--size-xs);;
    border           : none;
    padding          : 1.125rem;
    inline-size      : 100%;
    background-color : var(--color-dark-cyan);
    color            : var(--color-white);
    font-weight      : 700;
    border-radius    : 8px;
    transition       : background-color 250ms ease;
}

.button:hover {
    background-color : var(--color-dark-cyan-hover);
}

/*
 * Utilities
 */
.font\:heading {
    font-family : var(--font-headings);
    font-size   : var(--font-size-3);
    font-weight : 700;
    line-height : 1;
}

.color\:dark-cyan {
    color : var(--color-dark-cyan);
}

.tag {
    text-transform : uppercase;
    letter-spacing : 4px;
}