/* BLOCKS */


/* Subscribe CTA Block */

.subscribe-cta > .container > div {
  background-color: rgba(0,0,0,0.025);
  padding: 1.5rem 0;
}

html.theme-dark .subscribe-cta > .container > div {
  background-color: rgba(255,255,255,0.05);
}

.subscribe-cta > .container > div > div {
  margin: 0 1.5rem;
  gap: 0.75rem 1.5rem;
}


/* Feature Grid Block */

.feature-grid > .container > .row > .col:nth-child(2) {
  border-left: 1px solid var(--color-lightest);
  border-right: 1px solid var(--color-lightest);
}

.feature-grid > .container > .row > .col:nth-child(1) > .row > .col:nth-child(1) .snippet:after,
.feature-grid-alt .col.left > .row > .col > .row > .col:not(:last-child) .snippet:after {
  background-color: var(--color-lightest);
  content: '';
  display: block;
  position: absolute;
  height: 1px;
  right: 0; bottom: -0.75rem; left: 0;
}

.feature-grid > .container > .row > .col:nth-child(1),
.feature-grid > .container > .row > .col:nth-child(3) {
  width: 25%;
}

.feature-grid > .container > .row > .col:nth-child(2) {
  width: 50%;
}

.feature-grid .col-latest .row {
  margin-bottom: -1rem;
}

.feature-grid .col-latest .col {
  margin-bottom: 1rem;
}

.feature-grid .snippet.sm {
  border-top: 1px solid var(--color-lightest);
  padding-top: 1rem;
}

.col-feature-grid-lg h2.text-xxl.mb-075rem {
  font-size: 3rem;
  margin-bottom: 1rem!important;
}

@media (min-width: 480px) {
  .col-feature-grid-lg .snippet {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .col-feature-grid-lg .snippet > div {
    flex-grow: 1;
  }
}


/* Feature Grid Alt Block */

.feature-grid-alt.is-top {
  order: 1;
}

.feature-grid-alt .col.left {
  width: 50%;
}

.feature-grid-alt .col.left > .row > .col {
  border-right: 1px solid var(--color-lightest);
  width: 50%;
}

.feature-grid-alt .col.right {
  height: calc(100vh - 4rem);
  height: calc(100svh - 4rem);
  padding-left: 2rem;
  position: sticky;
  top: 2rem;
  transition: 0.3s ease-out;
  width: 50%;
}

body.nav-visible .feature-grid-alt .col.right {
  height: calc(100vh - 9rem);
  height: calc(100svh - 9rem);
  top: 7rem;
}

.feature-grid-alt .col.right :is(picture,video) {
  inset: 0;
}

.feature-grid-alt .col.right .inner {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0) 75%);
  padding: 3rem;
}

.feature-grid-alt .col.right h2 {
  position: relative;
  z-index: 2;
}

.feature-grid-alt .col.right h2:hover {
  text-decoration: underline;
}


/* Snippets Block */

.snippets .col {
  width: 25%;
}

.snippets-title {
  border-top: 1px solid var(--color-lightest);
  border-bottom: 1px solid var(--color-lightest);
  padding: 1rem 0;
  width: 100%;
}


/* Featured Slider */

.featured-slider-block .snippets-title svg {
  cursor: pointer;
  height: 1.5rem;
  margin-left: 0.75rem;
  min-width: 1.5rem;
  width: 1.5rem;
}

.featured-slider .flickity-viewport {
  overflow: visible;
}

.featured-slider .carousel-cell {
  margin-right: 2rem;
  width: calc(33.33333% - 1.5rem);
}

.featured-slider.text-over .carousel-cell {
  width: 40%;
}

.featured-slider.text-over .carousel-cell > div {
  aspect-ratio: 4/3;
}

.featured-slider .inner {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0) 75%);
  padding: 1.5rem;
}

.featured-slider .inner > div {
  max-width: 75%;
}

.featured-slider-prev path, .featured-slider-next path {
  fill: var(--color-titles);
  transition: 0.15s ease-out;
}

.featured-slider-prev.disabled path, .featured-slider-next.disabled path {
  fill: var(--color-lightest);
}

.featured-slider-prev.disabled, .featured-slider-next.disabled {
  cursor: unset;
  pointer-events: none;
}


/* Featured Posts */

.block.featured-text-below.is-slider,
.block.featured-text-over.is-slider, 
.block.featured-two-col.is-slider {
  padding-bottom: calc(3rem - 8px);
}

.featured-text-over .outer, 
.featured-text-below :is(picture,video) {
  aspect-ratio: 16/9;
}

.featured-text-over h2,
.featured-two-col h2 {
  position: relative;
  z-index: 2;
}

.featured-text-over h2:hover,
.featured-two-col h2:hover {
  text-decoration: underline;
}

.featured-two-col .flickity-slider {
  display: flex;
}

.featured-two-col .carousel-cell {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.featured-two-col .carousel-cell:after {
  background-color: var(--color-body-bg);
  content: '';
  display: block;
  pointer-events: none;
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
}

.featured-two-col .outer {
  border: 1px solid var(--color-lightest);
}

.featured-two-col .row {
  align-items: stretch;
  flex-grow: 1;
  margin-left: 0;
  margin-right: 0;
}

.featured-two-col .col {
  padding: 0;
  width: 50%;
}

.featured-two-col .col:nth-child(1) {
  aspect-ratio: 1/1;
}

.featured-two-col.right .col:nth-child(1) {
  order: 2;
}

.featured-two-col .col:nth-child(2) > div {
  padding: 3rem 5rem;
}

.featured-text-over .inner {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0) 75%);
  padding: 3rem;
}

.featured-text-over .inner > * {
  max-width: 66.666666%;
}


/* Media Queries */

/* 1200px */
@media (max-width: 1199.98px) {
  .feature-grid > .row > .col:nth-child(3) .col:nth-child(6) {display: none;}
  .featured-slider .inner > div {max-width: 100%;}
  .featured-text-over .inner > * {max-width: 75%;}
  .featured-two-col .col:nth-child(2) > div {padding: 3rem;}
}

/* 960px */
@media (max-width: 959.98px) {
  .feature-grid > .container > .row > .col:nth-child(1) {width: 33.33333%;}
  .feature-grid > .container > .row > .col:nth-child(2) {border-right: none; width: 66.666666%;}
  .feature-grid > .container > .row > .col:nth-child(3) {width: 100%;}
  .feature-grid > .container > .row > .col:nth-child(3) .col {width: 33.33333%;}
  .feature-grid > .container > .row > .col:nth-child(3) > h2 {border-top: 1px solid var(--color-lightest); padding-top: 1rem;}
  .feature-grid > .container > .row > .col:nth-child(3) .col:nth-child(6) {display: block;}
  .snippets .col {width: 50%;}
  .featured-slider .carousel-cell {width: calc(50% - 1rem);}
  .featured-slider.text-over .carousel-cell {width: 60%;}
  .featured-text-over .outer, .featured-text-below :is(picture,video), .featured-text-below .snippet-no-img, .feature-grid-alt .col.right {aspect-ratio: 1/1;}
  .featured-text-over .inner > * {max-width: 100%;}
  .featured-two-col .col:nth-child(2) > div {padding: 1.5rem;}
  .feature-grid-alt .col.left {order: 2; width: 100%;}
  .feature-grid-alt .col.right {padding-left: 1rem; order: 1; width: 100%;}
  .feature-grid-alt .col.left > .row > .col:last-child {border-right: none;}
  .feature-grid-alt .col.right, body.nav-visible .feature-grid-alt .col.right {height: unset;position: relative; top: unset;}
}

/* 720px */
@media (max-width: 719.98px) {
  .feature-grid > .container > .row > .col:nth-child(3) .col {width: 50%;}
  .col-feature-grid-lg h2.text-xxl.mb-075rem {font-size: 2rem;}
  .feature-grid-alt .col.right {padding-left: 0.5rem;}
  .featured-slider .carousel-cell {margin-right: 1rem; width: calc(50% - 0.5rem);}
  .featured-slider.text-over .carousel-cell {width: 75%;}
  .featured-slider.text-over .carousel-cell > div {aspect-ratio: 4/3;}
  .featured-two-col h2 {font-size: 1.25rem;}
}

/* 480px */
@media (max-width: 479.98px) {
  .feature-grid > .container > .row > .col:nth-child(1) {order: 2; width: 100%;}
  .feature-grid > .container > .row > .col:nth-child(1) .col {width: 50%;}
  .feature-grid > .container > .row > .col:nth-child(1) > .row > .col:nth-child(1) .snippet:after {display: none;}
  .feature-grid > .container > .row > .col:nth-child(2) {border-left: none; order: 1; width: 100%;}
  .feature-grid > .container > .row > .col:nth-child(3) {order: 3; width: 100%;}
  .feature-grid > .container > .row > .col:nth-child(3) .col {width: 100%;}
  .snippet h2.text-xxl {font-size: 1.25rem;}
  .featured-slider.text-over .carousel-cell > div {aspect-ratio: 1/1;}
  .featured-text-over .outer, .featured-text-below :is(picture, video), .featured-text-below .snippet-no-img, .feature-grid-alt .col.right {aspect-ratio: 3/4;}
  .featured-text-over .inner, .feature-grid-alt .col.right .inner {padding: 1.5rem;}
  .featured-two-col .col:nth-child(2) > div {padding: 1rem;}
}