/* Screen Sizes https://tailwindcss.com/docs/responsive-design
xs	25rem (400px)	@media (width >= 40rem) { ... }
sm	40rem (640px)	@media (width >= 40rem) { ... }
md	48rem (768px)	@media (width >= 48rem) { ... }
lg	64rem (1024px)	@media (width >= 64rem) { ... }
xl	80rem (1280px)	@media (width >= 80rem) { ... }
2xl	96rem (1536px)	@media (width >= 96rem) { ... }
*/
/* 
only for stuff which is easier to write in sass than tailwind

@include lg() {}

*/
:root {
  --height-navbar: 72px;
  --height-navbar-sticky: 56px;
}
@media (width >= 48rem) {
  :root {
    --height-navbar: 80px;
    --height-navbar-sticky: 64px;
  }
}
@media (width >= 80rem) {
  :root {
    --height-navbar: 100px;
    --height-navbar-sticky: 80px;
  }
}

.bg-center-center {
  background-position: center;
}

.bg-left-center {
  background-position: left center;
}

.bg-right-center {
  background-position: right center;
}

.item-grid > .grid-item.block-type-card > .card {
  background-color: var(--color-primaryLight);
}
.item-grid > .grid-item.block-type-card:nth-child(even) > .card {
  background-color: var(--color-secondaryLight);
}
@media (width >= 64rem) {
  .item-grid > .grid-item.block-type-card:nth-child(4n+1) > .card, .item-grid > .grid-item.block-type-card:nth-child(4n+4) > .card {
    background-color: var(--color-primaryLight);
  }
  .item-grid > .grid-item.block-type-card:nth-child(4n+2) > .card, .item-grid > .grid-item.block-type-card:nth-child(4n+3) > .card {
    background-color: var(--color-secondaryLight);
  }
}

.navbar-container {
  position: relative;
}
.navbar-container::before {
  content: "";
  position: absolute;
  width: 106%;
  height: 100%;
  left: -3%;
  z-index: -1;
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
}

.navbar-sticky .navbar-container::before {
  background-color: rgba(255, 255, 255, 0.95);
}