/** Shopify CDN: Minification failed

Line 148:13 Expected identifier but found whitespace
Line 148:15 Unexpected "{"
Line 148:24 Expected ":"
Line 292:14 Expected identifier but found whitespace
Line 293:5 Unexpected "{"
Line 293:14 Expected ":"
Line 293:43 Unexpected ","
Line 294:5 Unexpected "{"
Line 294:14 Expected ":"
Line 316:14 Expected identifier but found whitespace
... and 24 more hidden warnings

**/
/* =========================================================
   VS ABOUT STORY
   ========================================================= */

.vs-about-story {
  width: 100%;
  padding:
    var(--vs-story-padding-top)
    var(--vs-story-padding-right)
    var(--vs-story-padding-bottom)
    var(--vs-story-padding-left);

  background: var(--vs-story-bg);
  color: var(--vs-story-text);

  overflow: hidden;
}

.vs-about-story,
.vs-about-story *,
.vs-about-story *::before,
.vs-about-story *::after {
  box-sizing: border-box;
}


/* =========================================================
   OUTER
   ========================================================= */

.vs-about-story__outer {
  width: 100%;
  max-width: var(--vs-story-max-width);
  margin: 0 auto;
}


/* =========================================================
   CARD
   ========================================================= */

.vs-about-story__card {
  position: relative;

  width: 100%;
  min-height: var(--vs-story-min-height);

  overflow: hidden;

  background: var(--vs-story-bg);

  border:
    var(--vs-story-border-width)
    solid
    var(--vs-story-border-color);

  border-radius: var(--vs-story-radius);

  box-shadow:
    0 10px 30px
    rgba(
      0,
      0,
      0,
      var(--vs-story-shadow-opacity)
      
    );
    


/* =========================================================
   GRID
   ========================================================= */

.vs-about-story__grid {
  display: grid;

  grid-template-columns:
    var(--vs-story-left-width)
    var(--vs-story-content-width);

  width: 100%;
  min-height: var(--vs-story-min-height);

  gap: var(--vs-story-column-gap);
}


/* =========================================================
   MEDIA
   ========================================================= */

.vs-about-story__media {
  position: relative;

  min-width: 0;
  min-height: var(--vs-story-min-height);

  overflow: hidden;

  background: #111;
}


/* =========================================================
   IMAGE WRAPPER
   ========================================================= */

.vs-about-story__image-wrap {
  position: absolute;

  inset: 0;

  overflow: hidden;

  border-radius: var(--vs-story-image-radius);
}


/* =========================================================
   IMAGE
   ========================================================= */

.vs-about-story__image {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 100%;
  height: 100%;

  object-fit: {{ section.settings.image_fit }};

  object-position:
    var(--vs-story-image-x)
    var(--vs-story-image-y);

  transform:
    translate(-50%, -50%)
    scale(var(--vs-story-image-scale));

  filter:
    brightness(var(--vs-story-image-brightness))
    saturate(var(--vs-story-image-saturation));

  display: block;

  max-width: none;

  transition:
    transform .5s ease,
    filter .5s ease;
}


/* =========================================================
   IMAGE OVERLAY
   ========================================================= */

.vs-about-story__image-overlay {
  position: absolute;

  inset: 0;

  z-index: 2;

  background: var(--vs-story-overlay-color);

  opacity: var(--vs-story-overlay-opacity);

  pointer-events: none;
}


/* =========================================================
   IMAGE GRADIENT
   ========================================================= */

.vs-about-story__image-gradient {
  position: absolute;

  z-index: 3;

  top: 0;
  right: 0;
  bottom: 0;

  width: 32%;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.35) 55%,
      var(--vs-story-bg) 100%
    );
}


/* =========================================================
   PLACEHOLDER
   ========================================================= */

.vs-about-story__placeholder {
  position: absolute;

  inset: 0;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 12px;

  color: #999;

  background:
    linear-gradient(
      135deg,
      #eeeeee,
      #dddddd
    );

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 12px;
  font-weight: 600;
}

.vs-about-story__placeholder svg {
  width: 55px;
  height: 55px;
}


/* =========================================================
   CONTENT
   ========================================================= */

.vs-about-story__content {
  position: relative;

  z-index: 5;

  min-width: 0;

  display: flex;
  flex-direction: column;

  justify-content: center;

  padding:
    35px
    38px;

  gap: var(--vs-story-content-gap);

  background: var(--vs-story-bg);
}


/* =========================================================
   EYEBROW
   ========================================================= */

.vs-about-story__eyebrow {
  margin: 0;

  font-family:
    {{ section.settings.body_font.family }},
    {{ section.settings.body_font.fallback_families }};

  font-size: var(--vs-story-eyebrow-size);
  font-weight: var(--vs-story-eyebrow-weight);

  line-height: 1.2;

  letter-spacing: var(--vs-story-eyebrow-spacing);

  text-transform: uppercase;

  color: var(--vs-story-accent);
}


/* =========================================================
   HEADING
   ========================================================= */

.vs-about-story__heading {
  margin: 0;

  font-family:
    {{ section.settings.heading_font.family }},
    {{ section.settings.heading_font.fallback_families }};

  font-size: var(--vs-story-heading-size);
  font-weight: var(--vs-story-heading-weight);

  line-height: var(--vs-story-heading-line-height);

  letter-spacing: var(--vs-story-heading-spacing);

  text-transform: uppercase;

  color: var(--vs-story-text);
}

.vs-about-story__heading p {
  margin: 0;
}

.vs-about-story__heading em {
  color: var(--vs-story-accent);
  font-style: normal;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.vs-about-story__description {
  max-width: 470px;

  margin: 0;

  font-family:
    {{ section.settings.body_font.family }},
    {{ section.settings.body_font.fallback_families }};

  font-size: var(--vs-story-description-size);
  font-weight: var(--vs-story-description-weight);

  line-height: var(--vs-story-description-line-height);

  color: var(--vs-story-muted);
}

.vs-about-story__description p {
  margin: 0;
}


/* =========================================================
   FEATURES
   ========================================================= */

.vs-about-story__features {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  width: 100%;

  margin-top: 2px;

  gap: 0;
}


/* =========================================================
   FEATURE
   ========================================================= */

.vs-about-story__feature {
  min-width: 0;

  display: flex;
  flex-direction: column;

  align-items: center;

  text-align: center;

  gap: var(--vs-story-feature-gap);

  padding:
    0 13px;

  border-right:
    1px solid
    var(--vs-story-feature-divider-color);
}

.vs-about-story__feature:first-child {
  padding-left: 0;
}

.vs-about-story__feature:last-child {
  padding-right: 0;
  border-right: 0;
}


/* =========================================================
   FEATURE ICON
   ========================================================= */

.vs-about-story__feature-icon {
  width: var(--vs-story-feature-icon-size);
  height: var(--vs-story-feature-icon-size);

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--vs-story-feature-icon-color);

  flex: 0 0 auto;
}

.vs-about-story__feature-icon svg {
  width: 100%;
  height: 100%;

  display: block;
}


/* =========================================================
   FEATURE INFO
   ========================================================= */

.vs-about-story__feature-info {
  min-width: 0;
}


/* =========================================================
   FEATURE TITLE
   ========================================================= */

.vs-about-story__feature-title {
  margin-bottom: 4px;

  font-family:
    {{ section.settings.body_font.family }},
    {{ section.settings.body_font.fallback_families }};

  font-size: var(--vs-story-feature-title-size);
  font-weight: var(--vs-story-feature-title-weight);

  line-height: 1.2;

  letter-spacing: .3px;

  text-transform: uppercase;

  color: var(--vs-story-text);
}


/* =========================================================
   FEATURE TEXT
   ========================================================= */

.vs-about-story__feature-text {
  font-family:
    {{ section.settings.body_font.family }},
    {{ section.settings.body_font.fallback_families }};

  font-size: var(--vs-story-feature-text-size);

  line-height: var(--vs-story-feature-text-line-height);

  color: var(--vs-story-muted);
}


/* =========================================================
   HOVER
   ========================================================= */

.vs-about-story__feature {
  transition:
    transform .25s ease;
}

.vs-about-story__feature:hover {
  transform: translateY(-2px);
}


/* =========================================================
   TABLET
   ========================================================= */

@media screen and (max-width: 1050px) {

  .vs-about-story__content {
    padding:
      28px;
  }

  .vs-about-story__heading {
    font-size:
      clamp(
        26px,
        3vw,
        var(--vs-story-heading-size)
      );
  }

  .vs-about-story__description {
    font-size:
      clamp(
        10px,
        1.2vw,
        var(--vs-story-description-size)
      );
  }

  .vs-about-story__feature {
    padding-left: 8px;
    padding-right: 8px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 749px) {

  .vs-about-story {
    padding-left: 0;
    padding-right: 0;
  }

  .vs-about-story__card {
    border-radius:
      calc(var(--vs-story-radius) * .7);
  }

  .vs-about-story__grid {
    display: flex;
    flex-direction: column;

    min-height: auto;
  }


  /* IMAGE */

  .vs-about-story__media {
    order: 1;

    width: 100%;
    height: var(--vs-story-mobile-image-height);

    min-height: var(--vs-story-mobile-image-height);
  }

  .vs-about-story__image-gradient {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;

    width: 100%;
    height: 30%;

    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,0) 0%,
        var(--vs-story-bg) 100%
      );
  }


  /* CONTENT */

  .vs-about-story__content {
    order: 2;

    padding:
      30px
      var(--vs-story-mobile-padding)
      35px;

    gap:
      calc(
        var(--vs-story-content-gap) * .9
      );
  }


  /* TYPOGRAPHY */

  .vs-about-story__heading {
    font-size:
      var(--vs-story-mobile-heading-size);

    line-height: 1.05;
  }

  .vs-about-story__description {
    font-size:
      var(--vs-story-mobile-description-size);

    max-width: none;
  }


  /* FEATURES */

  .vs-about-story__features {
    grid-template-columns:
      repeat(
        var(--vs-story-mobile-feature-columns),
        minmax(0, 1fr)
      );

    row-gap: 20px;
  }

  .vs-about-story__feature {
    padding:
      0 12px;

    border-right:
      1px solid
      var(--vs-story-feature-divider-color);
  }

  .vs-about-story__feature:nth-child(2n) {
    border-right: 0;
  }

  .vs-about-story__feature:first-child {
    padding-left: 12px;
  }

  .vs-about-story__feature:last-child {
    padding-right: 12px;
  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media screen and (max-width: 480px) {

  .vs-about-story__media {
    height:
      calc(
        var(--vs-story-mobile-image-height) * .85
      );

    min-height:
      calc(
        var(--vs-story-mobile-image-height) * .85
      );
  }

  .vs-about-story__content {
    padding:
      25px
      var(--vs-story-mobile-padding)
      28px;
  }

  .vs-about-story__eyebrow {
    font-size: 8px;
  }

  .vs-about-story__heading {
    font-size:
      calc(
        var(--vs-story-mobile-heading-size) * .9
      );
  }

  .vs-about-story__feature-icon {
    width: 24px;
    height: 24px;
  }

  .vs-about-story__feature-title {
    font-size: 9px;
  }

  .vs-about-story__feature-text {
    font-size: 8px;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .vs-about-story__image,
  .vs-about-story__feature {
    transition: none;
  }

}