:root {
    --background: hsl(35, 20%, 97%);
    --foreground: hsl(25, 30%, 12%);
    --card: hsl(35, 20%, 97%);
    --card-foreground: hsl(25, 30%, 12%);
    --primary: hsl(28, 55%, 35%);
    --primary-foreground: hsl(0, 0%, 100%);
    --secondary: hsl(35, 15%, 93%);
    --secondary-foreground: hsl(25, 30%, 12%);
    --muted: hsl(35, 15%, 93%);
    --muted-foreground: hsl(25, 12%, 42%);
    --accent: hsl(40, 80%, 55%);
    --accent-foreground: hsl(25, 30%, 12%);
    --border: hsl(30, 12%, 85%);
    --gold: hsl(40, 80%, 55%);
    --radius: 0.75rem;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border-color: var(--border);
}

body {
    background-color: var(--background);
    color: var(--foreground);
    font-family: 'Montserrat', sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
}

.container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 1rem;
    padding-left: 1rem;
}

@media (min-width: 640px) {
    .container {
        max-width: 640px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 768px;
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: 1024px;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1200px;
    }
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}