:root {
    --color-green-500: oklch(0.548 0.08 166.951);
    --color-green-700: oklch(0.343 0.05 166.872);

    --color-white: oklch(1 0 89.876);
    --color-black: oklch(0.253 0.018 251.962);
    --color-grey: oklch(0.555 0.036 273.673);
    --color-cream: oklch(0.943 0.013 71.327);

    --spacing-500: 2.5rem; /* 40px */
    --spacing-400: 2rem; /* 32px */
    --spacing-300: 1.5rem; /* 24px */
    --spacing-200: 1rem; /* 16px */
    --spacing-100: 0.5rem; /* 8px */
    --spacing-50: 0.25rem; /* 4px */
}

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

*, html, body {
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
}

body {
    background-color: var(--color-cream);
    height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 var(--spacing-200);
}

img {
    max-width: 100%;
    width: 100%;
    height: 100%;
    max-height: 100%
}

button {
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    padding: 0;
    margin: 0;
    cursor: pointer;
    outline: none;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-black);
    font-family: 'Fraunces', serif;
    line-height: 100%;
    font-weight: 700;
}

.card {
    background-color: var(--color-white);
    border-radius: 0.5rem;
    overflow: hidden;
}

.card .content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-300);
    padding: var(--spacing-400);
}

.card .content .tag span {
    text-transform: uppercase;
    line-height: 120%;
    letter-spacing: 0.3125rem;
    font-size: 0.75rem;
    color: var(--color-grey);
}

.card .content h1 {
    font-size: 2rem;
}

.card .content p {
    line-height: 160%;
    font-size: 0.875rem;
    color: var(--color-grey);
}

.card .content .price {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-200);
}

.card .content .price .new {
    color: var(--color-green-500);
    font-weight: 700;
    font-size: 2rem;
    line-height: 100%;
}

.card .content .price .oldPrice {
    font-size: 0.8125rem;
    line-height: 120%;
    text-decoration-line: line-through;
    color: var(--color-grey);
}

.card .content .btn {
    padding: var(--spacing-200) var(--spacing-400);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-50);
    border-radius: var(--spacing-100);
    background-color: var(--color-green-500);
    color: var(--color-white);
    transition: background-color 300ms ease-in-out;
}

.card .content .btn:hover {
    background-color: var(--color-green-700);
}

.card .content .btn span {
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 110%;
}

@media (min-width: 48em) {
    body {
        padding: 0;
    }

    .card {
        display: flex;
        max-width: 37.5rem;
        width: 100%;
    }

    .card .img, .card .content {
        width: 50%;
    }
}