/* 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: 48px;
  --height-navbar-sticky: 48px;
}
@media (width >= 48rem) {
  :root {
    --height-navbar: 64px;
    --height-navbar-sticky: 64px;
  }
}
@media (width >= 80rem) {
  :root {
    --height-navbar: 80px;
    --height-navbar-sticky: 80px;
  }
}

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

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

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

.img-rounded img {
  border-radius: 999px;
}

.single-grid .grid-item.block-type-card {
  --card-offset: 1rem;
}
@media (width >= 48rem) {
  .single-grid .grid-item.block-type-card {
    --card-offset: 8rem;
  }
}
@media (width >= 64rem) {
  .single-grid .grid-item.block-type-card {
    --card-offset: 12rem;
  }
}
@media (width >= 80rem) {
  .single-grid .grid-item.block-type-card {
    --card-offset: 18rem;
  }
}
@media (width < 48rem) {
  .single-grid .grid-item.block-type-card {
    padding-inline: var(--card-offset);
  }
}
.single-grid .grid-item.block-type-card em {
  display: inline-flex;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  color: white;
  font-style: normal;
  font-size: var(--text-sm);
  background-color: var(--color-primaryAccent);
  font-weight: 600;
}
.single-grid .grid-item.block-type-card:nth-child(odd) {
  padding-right: var(--card-offset);
}
.single-grid .grid-item.block-type-card:nth-child(odd) .card-text {
  background-color: var(--color-primary);
}
.single-grid .grid-item.block-type-card:nth-child(odd) .card-text h2, .single-grid .grid-item.block-type-card:nth-child(odd) .card-text h3, .single-grid .grid-item.block-type-card:nth-child(odd) .card-text h4, .single-grid .grid-item.block-type-card:nth-child(odd) .card-text h5 {
  color: var(--color-secondary);
}
.single-grid .grid-item.block-type-card:nth-child(odd) .card-text p {
  color: white;
}
.single-grid .grid-item.block-type-card:nth-child(even) {
  padding-left: var(--card-offset);
}
@media (width >= 64rem) {
  .single-grid .grid-item.block-type-card:nth-child(even) .card {
    flex-direction: row-reverse;
  }
}
.single-grid .grid-item.block-type-card:nth-child(even) .card-text {
  background-color: var(--color-secondary);
}
.single-grid .grid-item.block-type-card:nth-child(even) .card-text em {
  background-color: var(--color-secondaryAccent);
}
.single-grid .grid-item.block-type-card:nth-child(even) .card-text .btn-secondary {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: transparent;
}
.single-grid .grid-item.block-type-card:nth-child(even) .card-text .btn-secondary:Hover {
  background: white;
  border-color: white;
}

.img-overlay-top {
  margin-top: 4rem;
}
@media (width >= 64rem) {
  .img-overlay-top .image-text .img-col {
    margin-top: -4rem;
  }
}

.text-columntitle {
  text-transform: uppercase;
  font-weight: 600;
  color: white;
  display: inline-flex;
  align-items: center;
  letter-spacing: 1px;
}
.text-columntitle.before-secondary::before {
  content: "";
  display: block;
  margin-right: 1rem;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  background-color: var(--color-secondary);
}

@media (width < 64rem) {
  .layout-section.bg-secondary .image-text {
    padding-top: 3rem;
  }
}
.layout-section.bg-secondary .writer .text-secondary {
  color: white;
}
.layout-section.bg-secondary .text-columntitle {
  padding: 0.75rem 1rem;
  border-radius: 999px;
  background-color: var(--color-secondaryAccent);
}
.layout-section.bg-secondary .btn-secondary {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: transparent;
}
.layout-section.bg-secondary .btn-secondary:hover {
  background: white;
  border-color: white;
}

.contact-block {
  min-height: 60dvh;
  display: flex;
  align-items: center;
}