.category-cards {
  display: grid;
  gap: var(--base-2);
  grid-auto-rows: 320px;
  grid-auto-flow: dense;
}
@media screen and (min-width: 840px) {
  .category-cards {
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--base-3);
  }
}
@media screen and (min-width: 1280px) {
  .category-cards {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: var(--base-4);
  }
}
@media screen and (min-width: 840px) {
  .category-cards--style {
    grid-template-areas: "colors colors contrast" "themes themes contrast" "typo   icons  icons" "typo   elev   elev" "grid   spac   resp";
  }
}
@media screen and (min-width: 1280px) {
  .category-cards--style {
    grid-template-areas: "colors colors contrast themes" "colors colors contrast themes" "typo   icons  icons 	icons" "typo   icons  icons    icons" "elev   spac   resp     grid";
  }
}
@media screen and (min-width: 840px) {
  .category-cards--patterns {
    grid-template-areas: "ext ext loading" "ext ext status" "cust cust form";
  }
}
@media screen and (min-width: 1280px) {
  .category-cards--patterns {
    grid-template-areas: "ext ext loading loading" "ext ext status status" "cust cust status status" "form form form form";
  }
}
@media screen and (min-width: 840px) {
  .category-cards--components {
    grid-template-areas: "button button card" "check dialog dropdown" "radio tabs tabs";
  }
}
@media screen and (min-width: 1280px) {
  .category-cards--components {
    grid-template-areas: "button button card card" "button button check radio" "dialog dropdown tabs tabs";
  }
}
@media screen and (min-width: 840px) {
  .category-card--colors {
    grid-area: colors;
  }
  .category-card--contrast {
    grid-area: contrast;
  }
  .category-card--themes {
    grid-area: themes;
  }
  .category-card--icons {
    grid-area: icons;
  }
  .category-card--typography {
    grid-area: typo;
  }
  .category-card--grid {
    grid-area: grid;
  }
  .category-card--elevation {
    grid-area: elev;
  }
  .category-card--spacing {
    grid-area: spac;
  }
  .category-card--responsive {
    grid-area: resp;
  }
  .category-card--loading {
    grid-area: loading;
  }
  .category-card--customize {
    grid-area: cust;
  }
  .category-card--form-design {
    grid-area: form;
  }
  .category-card--status {
    grid-area: status;
  }
  .category-card--extended-styles {
    grid-area: ext;
  }
  .category-card--button {
    grid-area: button;
  }
  .category-card--card {
    grid-area: card;
  }
  .category-card--checkbox {
    grid-area: check;
  }
  .category-card--dialog {
    grid-area: dialog;
  }
  .category-card--dropdown {
    grid-area: dropdown;
  }
  .category-card--radiobutton {
    grid-area: radio;
  }
  .category-card--tabs {
    grid-area: tabs;
  }
}
.category-card {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: #fafafa;
  border-radius: calc(var(--radius-2) * 2);
  transition: all 0.2s ease-out;
  transition: all 0.15s ease-out;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.theme-dark .category-card {
  background-color: #000000;
}
.category-card:active {
  transition-duration: 0.1s;
}
.category-card__link {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: transparent;
  z-index: 2;
  border-radius: inherit;
}
.category-card__title {
  /* position: absolute;
		top: var(--base);
		left: var(--base); */
  padding: var(--base-2) var(--base-3);
  background-color: rgba(242, 242, 242, 0.95);
  color: #000000;
  z-index: 1;
  border-radius: var(--radius-2);
  margin: 0;
  font-family: var(--font-stack-headings);
  font-size: var(--font-size-h4);
  font-weight: 700;
  letter-spacing: -0.03ch;
  font-variation-settings: var(--heading-font-variation-settings);
  letter-spacing: initial;
  transition: all 0.2s ease-out;
  transition: all 0.15s ease-out;
}
.theme-dark .category-card__title {
  background-color: rgba(242, 242, 242, 0.95);
}
@supports (-webkit-backdrop-filter: blur(0px)) or (backdrop-filter: blur(0px)) {
  .category-card__title {
    -webkit-backdrop-filter: blur(60px) saturate(180%);
    backdrop-filter: blur(60px) saturate(180%);
    background-color: rgba(242, 242, 242, 0.75);
  }
  .theme-dark .category-card__title {
    background-color: rgba(242, 242, 242, 0.75);
  }
}
.category-card__title:active {
  transition-duration: 0.1s;
}
.category-card__img {
  position: absolute;
  transition: all 0.2s ease-out;
  transition: all 0.15s ease-out;
  border: 0 none !important;
  border-radius: 0;
  min-height: 100%;
  min-width: 100%;
  object-fit: cover;
}
.category-card__img:active {
  transition-duration: 0.1s;
}
.category-card:hover {
  background-color: #f2f2f2;
}
.theme-dark .category-card:hover {
  background-color: #131313;
}
.category-card .category-card__link:hover ~ .category-card__img {
  transform: scale(1.2);
  opacity: 0.6;
}
.category-card .category-card__link:hover ~ .category-card__title {
  background-color: rgba(0, 0, 0, 0.95);
  color: #FFFFFF;
}
.theme-dark .category-card .category-card__link:hover ~ .category-card__title {
  background-color: rgba(0, 0, 0, 0.95);
}
@supports (-webkit-backdrop-filter: blur(0px)) or (backdrop-filter: blur(0px)) {
  .category-card .category-card__link:hover ~ .category-card__title {
    -webkit-backdrop-filter: blur(60px) saturate(180%);
    backdrop-filter: blur(60px) saturate(180%);
    background-color: rgba(0, 0, 0, 0.75);
  }
  .theme-dark .category-card .category-card__link:hover ~ .category-card__title {
    background-color: rgba(0, 0, 0, 0.75);
  }
}

/*# sourceMappingURL=developer.css.map */