/*!***************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/hmg-section/style.scss ***!
  \***************************************************************************************************************************************************************************************************************************************************/
:root {
  --hmg-color-main: 169, 133, 31;
  --hmg-color-secondary: 225, 200, 120;
  --hmg-color-teal: 31, 143, 138;
  --hmg-color-grey: 122, 122, 122;
  --hmg-color-grey-light: 202, 198, 196;
  --hmg-color-grey-dark: 42, 42, 42;
  --hmg-color-background: 247, 246, 244;
  --hmg-card-teal: 11, 71, 82;
  --hmg-card-green: 27, 73, 13;
  --hmg-card-pink: 97, 20, 53;
  --hmg-card-purple: 55, 11, 78;
  --hmg-card-blue: 19, 35, 74;
  --hmg-card-light-teal: 229, 251, 255;
  --hmg-card-light-green: 237, 255, 232;
  --hmg-card-light-pink: 255, 236, 244;
  --hmg-card-light-purple: 246, 230, 255;
  --hmg-card-light-blue: 226, 235, 255;
  --hmg-button-yellow: 242, 194, 53;
  --hmg-button-orange: 255, 121, 64;
  --hmg-button-red: 255, 46, 60;
  --hmg-button-green: 189, 216, 50;
  --hmg-heading-font: sans-serif;
  --hmg-body-font: sans-serif;
}

/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 *
 * Replace them with your own styles or remove the file completely.
 */

.hmg-section {
  position: relative;
  overflow: hidden;
  padding: 0 20px;
}

@media screen and (min-width: 768px) {
  .hmg-section {
    padding: 0 50px;
  }
}

.hmg-section__inner {
  max-width: 1024px;
  margin: 0 auto;
  padding: 50px 0;
  position: relative;
  z-index: 2;
  text-align: center;
}

.hmg-section__inner ul {
  margin-bottom: 32px;
}

.hmg-section__inner ul li {
  position: relative;
  text-align: left;
  padding-left: 28px;
  margin-bottom: 18px;
}

.hmg-section__inner ul li:before {
  background: rgb(var(--hmg-color-teal));
  content: "";
  border-radius: 50%;
  display: block;
  left: 0;
  top: 0.625rem;
  height: 0.625rem;
  width: 0.625rem;
  position: absolute;
}

.hmg-section__inner a:not([class]) {
  color: rgb(var(--hmg-color-teal));
}

.hmg-section__inner--main {
  color: rgb(var(--hmg-color-main));
}

.hmg-section__inner--secondary {
  color: rgb(var(--hmg-color-secondary));
}

.hmg-section__inner--teal {
  color: rgb(var(--hmg-color-teal));
}

.hmg-section__inner--grey {
  color: rgb(var(--hmg-color-grey));
}

.hmg-section__inner--grey-light {
  color: rgb(var(--hmg-color-grey-light));
}

.hmg-section__inner--grey-dark {
  color: rgb(var(--hmg-color-grey-dark));
}

.hmg-section__inner--background {
  color: rgb(var(--hmg-color-background));
}

.hmg-section--top:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1;
  height: 500px;
}

@media screen and (min-width: 1200px) {
  .hmg-section--top:before {
    height: 410px;
  }
}

.hmg-section--top--main:before {
  background: linear-gradient(to bottom, rgba(var(--hmg-color-main), 1) 0%, rgba(var(--hmg-color-main), 0) 100%);
}

.hmg-section--top--secondary:before {
  background: linear-gradient(to bottom, rgba(var(--hmg-color-secondary), 1) 0%, rgba(var(--hmg-color-secondary), 0) 100%);
}

.hmg-section--top--teal:before {
  background: linear-gradient(to bottom, rgba(var(--hmg-color-teal), 1) 0%, rgba(var(--hmg-color-teal), 0) 100%);
}

.hmg-section--top--grey:before {
  background: linear-gradient(to bottom, rgba(var(--hmg-color-grey), 1) 0%, rgba(var(--hmg-color-grey), 0) 100%);
}

.hmg-section--top--grey-light:before {
  background: linear-gradient(to bottom, rgba(var(--hmg-color-grey-light), 1) 0%, rgba(var(--hmg-color-grey-light), 0) 100%);
}

.hmg-section--top--grey-dark:before {
  background: linear-gradient(to bottom, rgba(var(--hmg-color-grey-dark), 1) 0%, rgba(var(--hmg-color-grey-dark), 0) 100%);
}

.hmg-section--bottom:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: 500px;
}

@media screen and (min-width: 1200px) {
  .hmg-section--bottom:after {
    height: 410px;
  }
}

.hmg-section--bottom--main:after {
  background: linear-gradient(to bottom, rgba(var(--hmg-color-main), 0) 0%, rgba(var(--hmg-color-main), 1) 100%);
}

.hmg-section--bottom--secondary:after {
  background: linear-gradient(to bottom, rgba(var(--hmg-color-secondary), 0) 0%, rgba(var(--hmg-color-secondary), 1) 100%);
}

.hmg-section--bottom--teal:after {
  background: linear-gradient(to bottom, rgba(var(--hmg-color-teal), 0) 0%, rgba(var(--hmg-color-teal), 1) 100%);
}

.hmg-section--bottom--grey:after {
  background: linear-gradient(to bottom, rgba(var(--hmg-color-grey), 0) 0%, rgba(var(--hmg-color-grey), 1) 100%);
}

.hmg-section--bottom--grey-light:after {
  background: linear-gradient(to bottom, rgba(var(--hmg-color-grey-light), 0) 0%, rgba(var(--hmg-color-grey-light), 1) 100%);
}

.hmg-section--bottom--grey-dark:after {
  background: linear-gradient(to bottom, rgba(var(--hmg-color-grey-dark), 0) 0%, rgba(var(--hmg-color-grey-dark), 1) 100%);
}

/*# sourceMappingURL=style-index.css.map*/