/*

- Add icon variables here, f.e.

$icon-check: '<svg width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 11.2 3.4 7.6 2 9l5 5 9-9-1.4-1.4z" fill="currentColor"/></svg>';


- This variables can be used like this:

.className {
  background-image: background-icon($icon-check, $primary-color-1);
}

*/
/*

- Add icon variables here, f.e.

$icon-check: '<svg width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 11.2 3.4 7.6 2 9l5 5 9-9-1.4-1.4z" fill="currentColor"/></svg>';


- This variables can be used like this:

.className {
  background-image: background-icon($icon-check, $primary-color-1);
}

*/
.snk-stage {
  display: flex;
}
@media (min-width: 768px) {
  .snk-stage > .container > .row {
    height: 100%;
  }
}
@media (min-width: 768px) {
  .snk-stage-mediaCol {
    padding-left: 4.25rem;
  }
}
.snk-stage .snk-stage-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  height: 100%;
  max-width: 725px;
}
@media (min-width: 1024px) {
  .snk-stage .snk-stage-copy {
    max-width: 837px;
  }
}
.snk-stage .snk-stage-copy p {
  margin-bottom: 0;
}
.snk-stage .snk-stage-image picture,
.snk-stage .snk-stage-image img {
  height: 100%;
}
.snk-stage .snk-stage-image img {
  display: block;
  object-fit: contain;
  width: 100%;
}
@media (max-width: 767.98px) {
  .snk-stage .snk-stage-image {
    height: 250px;
    margin-inline: calc(var(--snk-container-x-padding) * -1);
  }
}
@media (min-width: 768px) {
  .snk-stage .snk-stage-image {
    width: calc(50vw - var(--snk-gutter-x) * 0.5 - 56px);
    aspect-ratio: 35/40;
  }
}
@media (max-width: 767.98px) {
  .snk-stage .snk-buttons {
    margin-top: 1.5rem;
  }
}
.snk-stage h1 + .snk-buttons {
  margin-top: 1rem;
}
.snk-stage_home {
  background-image: url(../../../assets/svgs/bg/stage_V_logo_bg.svg);
  background-repeat: no-repeat;
  background-position: top right;
  background-size: auto 100%;
}
@media (max-width: 767.98px) {
  .snk-stage_home {
    min-height: 520px;
    background-position: top 0 right -24px;
  }
}
@media (min-width: 1024px) {
  .snk-stage_home .snk-stage-copy {
    max-width: 725px;
  }
}
.snk-stage_home, .snk-stage_small {
  align-items: center;
}
@media (min-width: 1024px) {
  .snk-stage_home, .snk-stage_medium {
    min-height: 838px;
  }
}
@media (min-width: 1024px) {
  .snk-stage_medium .snk-stage-image {
    max-width: 800px;
    height: 100%;
  }
}
.snk-stage_medium .snk-stage-copy {
  max-width: 557px;
  padding-top: var(--snk-section-y-padding-mobile);
  padding-bottom: 2rem;
}
@media (min-width: 1024px) {
  .snk-stage_medium .snk-stage-copy {
    padding-block: var(--snk-section-y-padding-desktop);
  }
}
.snk-stage_small {
  background-image: url(../../../assets/svgs/bg/stage_small_V_logo_bg.svg);
  background-repeat: no-repeat;
  background-position: top right;
  background-size: contain;
}
@media (max-width: 767.98px) {
  .snk-stage_small {
    min-height: 490px;
    background-size: auto 490px;
    background-position: bottom right -384px;
  }
}