/* ------------------------- Scaling System-------------------------  */

/* Desktop */
:root {
  --size-unit: 10; /* body font-size in design - no px */
  --size-container-ideal: 1440; /* screen-size in design - no px */
  --size-container-min: 992px;
  --size-container-max: 1920px;
  --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
  --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
}

/* Tablet */
@media screen and (max-width: 991px) {
  :root {
    --size-container-ideal: 834; /* screen-size in design - no px */
    --size-container-min: 768px;
    --size-container-max: 991px;
  }
}

/* Mobile Landscape */
@media screen and (max-width: 767px) {
  :root {
    --size-container-ideal: 550; /* screen-size in design - no px */
    --size-container-min: 480px;
    --size-container-max: 767px;
  }
}

/* Mobile Portrait */
@media screen and (max-width: 479px) {
  :root {
    --size-container-ideal: 390; /* screen-size in design - no px */
    --size-container-min: 320px;
    --size-container-max: 479px;
  }
}


.container {
  max-width: var(--size-container);
}

.container.medium {
  max-width: calc(var(--size-container) * 0.85);
}

.container.small {
  max-width: calc(var(--size-container) * 0.7);
}


/*HERO GALLERY*/

.infinite-grid[data-infinite-grid-status] {
  cursor: grab;
  transition: opacity 0.5s ease;
  opacity: 1;
}

.infinite-grid[data-infinite-grid-status="loading"] {
  opacity: 0;
}

.infinite-grid[data-infinite-grid-status="dragging"] {
  cursor: grabbing;
}

:is(.wf-design-mode, .wf-editor) .infinite-grid[data-infinite-grid-status] {
  opacity: 1;
}

/* Optional grid styling for the Webflow Designer */
:is(.wf-design-mode, .wf-editor) .infinite-grid .infinite-grid__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/*FLICK CARDS DRAWINGS*/

[data-flick-cards-dragger] {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: auto;
  touch-action: pan-y;
}

/* Position Slides (also in Webflow Designer) */
[data-flick-cards-item-status] .flick-card__media,
:is(.wf-design-mode, .w-editor) .flick-card__media {
  transition: opacity 0.2s ease;
  opacity: 0.5;
}

[data-flick-cards-item-status="2-before"] .flick-card__media,
[data-flick-cards-item-status="2-after"] .flick-card__media,
:is(.wf-design-mode, .w-editor) .flick-group__item:nth-child(2) .flick-card__media,
:is(.wf-design-mode, .w-editor) .flick-group__item:nth-last-child(1) .flick-card__media{
  transition: opacity 0.2s ease;
  opacity: 0.75;
}

[data-flick-cards-item-status="active"] .flick-card__media,
:is(.wf-design-mode, .w-editor) .flick-group__item:nth-child(1) .flick-card__media {
  opacity: 1;
}

:is(.wf-design-mode, .w-editor) .flick-group__item:nth-child(1) {z-index: 4;}
:is(.wf-design-mode, .w-editor) .flick-group__item:nth-child(2) {transform: translate(25%, 1%) rotate(10deg) scale(0.9, 0.9);z-index: 3;}
:is(.wf-design-mode, .w-editor) .flick-group__item:nth-child(3) {transform: translate(45%, 5%) rotate(15deg) scale(0.8, 0.8);z-index: 2;}
:is(.wf-design-mode, .w-editor) .flick-group__item:nth-last-child(1) {transform: translate(-25%, 1%) rotate(-10deg) scale(0.9, 0.9);z-index: 3;}
:is(.wf-design-mode, .w-editor) .flick-group__item:nth-last-child(2) {transform: translate(-45%, 5%) rotate(-15deg) scale(0.8, 0.8);z-index: 2;}

/* Animate Button */
[data-flick-cards-item-status] .flick-card__btn,
:is(.wf-design-mode, .w-editor) .flick-group__item .flick-card__btn {
  transition: opacity 0.4s cubic-bezier(0.625, 0.05, 0, 1), 1s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0;
  transform: translate(0%, 50%) rotate(0.001deg);
}

[data-flick-cards-item-status="active"] .flick-card__btn,
:is(.wf-design-mode, .w-editor) .flick-group__item:nth-child(1) .flick-card__btn {
  opacity: 1;
  transform: translate(0%, 0%) rotate(0.001deg);
}