/*!*************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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-intro/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-intro {
  position: relative;
}

@media screen and (min-width: 768px) {
  .hmg-intro {
    padding-top: 72px;
  }
}

@media screen and (min-width: 768px) {
  .hmg-intro__content {
    position: relative;
    z-index: 1;
    padding: 1.25rem 1.75rem;
  }
}

@media screen and (min-width: 1024px) {
  .hmg-intro__content {
    position: relative;
    z-index: 1;
    padding: 9rem 1.75rem 1.75rem 1.75rem;
  }
}

@media screen and (min-width: 1200px) {
  .hmg-intro__content {
    padding: 9rem 4rem 6rem 4rem;
    min-height: 600px;
    max-width: 50%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }
}

@media screen and (min-width: 1600px) {
  .hmg-intro__content {
    padding: 9rem 6rem 6rem 6rem;
  }
}

@media screen and (min-width: 1800px) {
  .hmg-intro__content {
    padding: 9rem 8rem 6rem 8rem;
  }
}

.hmg-intro__text {
  padding: 1.25rem;
  background: rgb(var(--hmg-color-background));
}

@media screen and (min-width: 768px) {
  .hmg-intro__text {
    width: 380px;
  }
}

@media screen and (min-width: 1024px) {
  .hmg-intro__text {
    width: 520px;
  }
}

@media screen and (min-width: 1200px) {
  .hmg-intro__text {
    width: 600px;
    padding: 1.5rem;
  }
}

.hmg-intro__text h1,
.hmg-intro__text h2 {
  margin-bottom: 1.25rem;
}

.hmg-intro__image {
  padding-bottom: 50%;
  background-size: cover;
  background-position: center;
}

@media screen and (min-width: 768px) {
  .hmg-intro__image {
    position: absolute;
    padding-bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }
}

@media screen and (min-width: 1024px) {
  .hmg-intro__image:after {
    content: "";
    display: block;
    position: absolute;
    padding-bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(57, 53, 49, 0.66) 0%, rgba(57, 54, 49, 0) 100%);
  }
}

@media screen and (min-width: 1024px) {
  .hmg-intro__image--dark:after {
    background: linear-gradient(180deg, rgba(var(--hmg-color-background), 0.66) 0%, rgba(var(--hmg-color-background), 0) 100%);
  }
}

.hmg-intro__buttons {
  display: flex;
}

.hmg-intro__btn {
  position: relative;
  color: rgb(var(--hmg-color-grey-dark));
  border-radius: 114px;
  text-decoration: none;
  font-family: var(--hmg-heading-font);
  font-weight: 500;
  font-size: 16px;
  line-height: 120%;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 16px 32px;
  display: block;
  transition: opacity 0.3s ease;
}

.hmg-intro__btn:hover, .hmg-intro__btn:focus {
  opacity: 0.75;
}

.hmg-intro__btn--teal {
  color: rgb(var(--hmg-color-background));
  background-color: rgb(var(--hmg-color-teal));
  box-shadow: 0px 10px 20px rgba(var(--hmg-color-teal), 0.25);
}

.hmg-intro__btn--yellow {
  background-color: rgb(var(--hmg-button-yellow));
  box-shadow: 0px 10px 20px rgba(var(--hmg-color-yellow), 0.25);
}

.hmg-intro__btn--orange {
  color: rgb(var(--hmg-color-background));
  background-color: rgb(var(--hmg-button-orange));
  box-shadow: 0px 10px 20px rgba(var(--hmg-color-orange), 0.25);
}

.hmg-intro__btn--red {
  color: rgb(var(--hmg-color-background));
  background-color: rgb(var(--hmg-button-red));
  box-shadow: 0px 10px 20px rgba(var(--hmg-color-red), 0.25);
}

.hmg-intro__btn--green {
  background-color: rgb(var(--hmg-button-green));
  box-shadow: 0px 10px 20px rgba(var(--hmg-color-green), 0.25);
}

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