/*!*******************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/@wordpress/scripts/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]!./public/src/styles/trvlr-cards.scss ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * ----------------------------------------
 * TRVLR Cards Styles
 * ----------------------------------------
 */
:root {
  --trvlr-cards-gap: 40px;
  --trvlr-cards-row-gap: 80px;
  --trvlr-cards-columns: repeat(4, 1fr);
  --trvlr-card-background: transparent;
  --trvlr-card-padding: 4px;
  --trvlr-card-border-radius: 8px;
  --trvlr-card-image-border-radius: 8px;
  --trvlr-card-title-font-size: 18px;
  --trvlr-card-title-font-weight: 600;
  --trvlr-card-focus-color: #000;
  --trvlr-card-icon-size: 18px;
  --trvlr-card-icon-color: #000;
  --trvlr-card-image-wrap-margin-bottom: 10px;
  --trvlr-card-title-margin-bottom: 8px;
  --trvlr-card-meta-margin-bottom: 0px;
  --trvlr-card-footer-margin-top: 20px;
}
.trvlr-cards-container {
  width: 100%;
  container-type: inline-size;
}
.trvlr-cards {
  display: grid;
  grid-template-columns: var(--trvlr-cards-columns);
  gap: var(--trvlr-cards-gap);
  row-gap: var(--trvlr-cards-row-gap);
  width: 100%;
}
@container (max-width: 1200px) {
  .trvlr-cards {
    -moz-column-gap: 3vw;
         column-gap: 3vw;
  }
}
@container (max-width: 1024px) {
  .trvlr-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}
@container (max-width: 920px) {
  .trvlr-cards {
    grid-template-columns: repeat(2, 1fr);
    -moz-column-gap: 5%;
         column-gap: 5%;
    row-gap: 50px;
  }
}
@container (max-width: 560px) {
  .trvlr-cards {
    grid-template-columns: repeat(1, 1fr);
    row-gap: 20px;
  }
}

/*# sourceMappingURL=trvlr-cards.css.map*/