/*!***************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/style.scss ***!
  \***************************************************************************************************************************************************************************************************************************************/
/**
 * 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.
 */
/* Common */
.lou-alpaca-grid {
  --animation-duration: 0.3s;
}
.lou-alpaca-grid {
  position: relative;
}
.lou-alpaca-grid .lou-grid-items {
  --columns: 1;
  --gap: 1rem;
  --column-width: calc((100% - ((var(--columns) - 1) * var(--gap))) / var(--columns));
  display: grid;
  grid-template-columns: repeat(var(--columns), var(--column-width));
  row-gap: var(--gap);
  -moz-column-gap: var(--gap);
       column-gap: var(--gap);
  position: relative;
  z-index: 100;
}
.lou-alpaca-grid .lou-grid-items .lou-grid-item {
  --dur: var(--animation-duration, 0.3s);
  position: relative;
  min-height: 30vh;
}
.lou-alpaca-grid .lou-grid-items .lou-grid-item:hover .lou-grid-item-inside, .lou-alpaca-grid .lou-grid-items .lou-grid-item:focus .lou-grid-item-inside, .lou-alpaca-grid .lou-grid-items .lou-grid-item:active .lou-grid-item-inside {
  /*
  --shift: -10px;
  top: var(--shift);
  right: var(--shift);
  left: var(--shift);
  bottom: var(--shift);
  */
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
  transform: scale(1.05);
}
.lou-alpaca-grid .lou-grid-items .lou-grid-item .lou-grid-item-inside {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.5);
  transform: scale(1);
  transition: box-shadow var(--dur), transform var(--dur);
  /* transition: top var(--dur), left var(--dur), right var(--dur), bottom var(--dur), box-shadow var(--dur); */
}
.lou-alpaca-grid .lou-grid-items .lou-grid-item .lou-backdrop {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000000;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.lou-alpaca-grid .lou-grid-items .lou-grid-item .lou-backdrop.lou-align-top {
  background-position: center top;
}
.lou-alpaca-grid .lou-grid-items .lou-grid-item .lou-words {
  padding: 0;
  margin: 0;
  position: absolute;
  z-index: 10;
  bottom: 0;
  left: 0;
  right: 0;
}
.lou-alpaca-grid .lou-grid-items .lou-grid-item .lou-words span {
  display: inline-block;
  padding: 2rem;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  text-shadow: 0 0 5px rgb(0, 0, 0), 0 0 5px rgb(0, 0, 0);
  color: rgb(255, 255, 255);
}
.lou-alpaca-grid .lou-grid-items .lou-grid-item.lou-promo {
  --radius: 6px;
}
.lou-alpaca-grid .lou-grid-items .lou-grid-item.lou-promo,
.lou-alpaca-grid .lou-grid-items .lou-grid-item.lou-promo .lou-grid-item-inside {
  border-radius: var(--radius);
}
.lou-alpaca-grid .lou-grid-items .lou-grid-item.lou-promo .lou-promo-title-wrap {
  background-color: #c2732a;
  padding: 0.75rem 1rem;
  border-radius: var(--radius) var(--radius) 0 0;
}
.lou-alpaca-grid .lou-grid-items .lou-grid-item.lou-promo .lou-promo-title-wrap h3 {
  font-family: var(--sans-serif, sans-serif);
  line-height: 1;
  margin: 0;
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 400;
}
@media (min-width: 1200px) {
  .lou-alpaca-grid .lou-grid-items .lou-grid-item.lou-promo .lou-promo-title-wrap {
    padding: 1.25rem 2rem;
  }
}
.lou-alpaca-grid .lou-grid-items .lou-grid-item.lou-promo .lou-promo-text-wrap {
  background-color: #ffffff;
  padding: 0.75rem 1rem;
  border-radius: 0 0 var(--radius) var(--radius);
}
.lou-alpaca-grid .lou-grid-items .lou-grid-item.lou-promo .lou-promo-text-wrap p {
  margin-top: 1rem;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--black, #000000);
}
.lou-alpaca-grid .lou-grid-items .lou-grid-item.lou-promo .lou-promo-text-wrap p:first-of-type {
  margin-top: 0;
}
@media (min-width: 900px) {
  .lou-alpaca-grid .lou-grid-items .lou-grid-item.lou-promo .lou-promo-text-wrap p {
    font-size: 1rem;
  }
}
@media (min-width: 1200px) {
  .lou-alpaca-grid .lou-grid-items .lou-grid-item.lou-promo .lou-promo-text-wrap {
    padding: 1.25rem 2rem;
  }
}
.lou-alpaca-grid .lou-grid-items .lou-grid-item.lou-promo .lou-promo-image {
  display: inline-block;
  max-width: 75px;
  max-height: 75px;
  height: 100%;
  width: 100%;
  aspect-ratio: 3/4;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  float: right;
  margin-left: 6px;
  margin-bottom: 6px;
}
@media (min-width: 1300px) {
  .lou-alpaca-grid .lou-grid-items .lou-grid-item.lou-promo .lou-promo-image {
    max-width: 125px;
    max-height: 125px;
  }
}

@media (min-width: 769px) {
  .lou-alpaca-grid .lou-grid-items {
    --columns: 3;
  }
  .lou-alpaca-grid .lou-grid-items .lou-grid-item {
    --col-span: span 1;
    --row-span: span 1;
    grid-column: var(--col-span);
    grid-row: var(--row-span);
  }
}

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