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

html {
    font-size: 62.5%;
    overflow-x: hidden;
    /* scroll-behavior: smooth; */
}

body {
    font-family: "Noto Sans", sans-serif;
    line-height: 1;
    font-weight: 400;
    color: #33281d;
    /* Only works if there is nothing absolutely positioned in relation to body*/
    overflow-x: hidden;
}

.grid {
    display: grid;
    gap: 5.2rem;
}

.grid--2cols {
    grid-template-columns: repeat(2, 1fr);
}

.grid--2cols--unequal {
    grid-template-columns: 2fr 3fr;
}

.grid--3cols {
    grid-template-columns: repeat(3, 1fr);
}

.heading-primary,
.heading-secondary,
.heading-card {
    font-family: "Nunito Sans", "Noto Sans", Helvetica, sans-serif;
}

.heading-primary {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.05rem;
}

.heading-secondary {
    font-size: 3.6rem;
    font-weight: 700;
}

.heading-card {
    font-size: 2.4rem;
    margin-bottom: 2rem;
    text-align: center;
}

.subheading {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    color: #b18d66;
    text-transform: uppercase;
    margin-bottom: 1.6rem;
    text-align: center;
}

.btn:link,
.btn:visited {
    display: inline-block;
    text-decoration: none;
    font-size: 1.4rem;
    padding: 1rem;
    border-radius: 9px;
    font-weight: 600;
    transition: all 0.5s;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.btn--primary:link,
.btn--primary:visited {
    color: #fffaf4;
    background-color: #33281d;
}

.btn--primary:hover,
.btn--primary:active {
    color: #33281d;
    background-color: #fffaf4;
    box-shadow: inset 0 0 0 2px #33281d;
}
.btn--secondary:link,
.btn--secondary:visited {
    color: #33281d;
    background-color: #e4b683;
}

.btn--secondary:hover,
.btn--secondary:active {
    color: #e4b683;
    background-color: #fffaf4;
    box-shadow: inset 0 0 0 2px #e4b683;
}

/*----- 01 TYPOGRAPHY SYSTEM -----

 - FONT SIZE SYSTEM (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 96

 - Font weights: 
 Default: 400
 Medium: 500
 Semi-bold: 600
 Bold: 700

 - Line heights:
Default: 1
Small: 1.05
Medium: 1.2
Paragraph default: 1.6

 - Letter spacing
0.5px
0.75px
*/

/*----- 02 COLOR SYSTEM -----

Primary color:  #fdca91



30% tint: #fedab2
70% tint: #feefde
90% tint: #fffaf4
10% shade: #e4b683
30% shade: #b18d66
80% shade: #33281d

Secondary color: #7f90b8

90% tint: #f2f4f8
20% shade:#667393



*/