/* Presets - Replace with library */

/* Display */
.block {
  display: block;
}
/* Display */

/* Width */
.w-100 {
  width: 100%;
}

.w-85 {
  width: 85%;
}

.w-75 {
  width: 60%;
}

.w-50 {
  width: 50%;
}
/* Width */

/* Padding */
/* Padding */

/* Margin */
.m-0 {
  margin: 0;
}

.m-auto {
  margin: auto;
}

.m-auto-left {
  margin-left: auto;
}

.m-auto-right {
  margin-right: auto;
}

.mb-0 {
  margin-bottom: 0;
}

.mb-6 {
  margin-bottom: 12px;
}
/* Margin */

/* Spacing */
.spacer-small {
  height: 24px;
  width:min-content;
}

.spacer-medium {
  height: 32px;
}

.spacer-large {
  height: 48px;
}

.spacer-xl {
  height: 64px;
}

.spacer-xxl {
  height: 84px;
}

.spacer-3xl {
  height: 96px;
}

.spacer-4xl {
  height: 112px;
}
/* Spacing */

/* Borders */
.border-dashed {
  border: 1px dashed var(--content-secondary);
  padding: 4px 16px;
  width: fit-content;
}
/* Borders */

/* Shadows */
/* Shadows */

/* Typography */
/* Font weight */
.regular {
  font-weight: 400;
}

.semi-bold {
  font-weight: 600;
}

.bold {
  font-weight: 700;
}
/* Font weight */

/* Colors */
.text-color-accent {
  color: var(--accent-color);
}
/* Colors */


/* Transform */
.overline {
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0 0 16px 0;
}
/* Typography */


/* Flex */
.flex {
  display: flex;
}

.flex-1 {
  flex: 1;
}

.flex-column {
  flex-direction: column;
}

.justify-left {
  justify-content: flex-start;
}

.justify-right {
  justify-content: flex-end;
}

.gap-small {
  gap: 10px;
}

.gap-medium {
  gap: 20px;
}

.gap-large {
  gap: 32px;
}

.gap-xl {
  gap: 40px;
}

.gap-xxl {
  gap: 64px;
}
/* Flex */

/* Global Styles */

body {
  margin: 0;
  font-family: 'Source Sans 3', sans-serif;
  color: var(--text-color);
  line-height: 1.6;
  font-size: 18px;
  letter-spacing: 0.2px;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--heading-color);
  font-family: 'Merriweather', serif;
}

.content {
  max-width: 1024px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.content-single {
  width: 65%;
  margin-left: auto;
  margin-right: auto;
}


/* Section */

.section-heading {
  font-size: 30px;
  font-weight: 300;
}

.section .img { 
  width: 100%
}

/* Section */

.hero .img {
  width: 80%;
}

/* Global Styles */
img {
  max-width: 100%;
}
/* Global Styles */