*, *::after, *::before {
  box-sizing: border-box;
}

* {
  font: inherit;
  margin: 0;
  padding: 0;
  border: 0;
}

@media only screen and (min-width: 993px) and (max-width: 1175px) {
.stack-cards__item {
  padding-bottom: calc(100%/(var(--stack-cards-item-ratio)))!important;
}


}

@media only screen and (min-width: 768px) and (max-width: 992px) {
.stack-cards__item {
  padding-bottom: calc(120%/(var(--stack-cards-item-ratio)))!important;
}

}

@media only screen and (min-width: 500px) and (max-width: 767px) {
.stack-cards__item {
  padding-bottom: calc(150%/(var(--stack-cards-item-ratio)))!important;
}

}

@media only screen and (min-width: 320px) and (max-width: 499px) {
.stack-cards__item {
  padding-bottom: calc(220%/(var(--stack-cards-item-ratio)))!important;
}

}

@media (min-width: 320px) {
/* variables */
:root {
  /* colors */
  --sg0-color-primary-hsl: 250, 84%, 54%;
  --sg0-color-bg-hsl: 0, 0%, 100%;
  --sg0-color-contrast-high-hsl: 230, 7%, 23%;
  --sg0-color-contrast-higher-hsl: 230, 13%, 9%;
  --sg0-color-bg-light-hsl: 0, 0%, 100%;

  /* spacing */
  --sg0-space-sm: 0.75rem;
  --sg0-space-md: 1.25rem;
}

@media(min-width: 64rem){
  :root {
    /* spacing */
    --sg0-space-sm: 1.125rem;
    --sg0-space-md: 2rem;
  }
}

/* component */
.stack-cards {
  --stack-cards-gap: var(--sg0-space-sm);
  --stack-cards-item-ratio: 2/1;
}

.stack-cards__item {
  position: relative!important;
  position: -webkit-sticky!important;
  position: sticky!important;
  top: var(--sg0-space-md);
  height: 0;  
  padding-bottom: calc(60%/(var(--stack-cards-item-ratio)));
  -webkit-transform-origin: center top;
          transform-origin: center top;
}
.stack-cards__item > * {
  position: absolute!important;
  top: 0;
  left: 0;
  width: 100%;
  height: auto!important;
  -o-object-fit: inherit!important;
     object-fit: inherit!important;
}

/* utility classes */
.sg0-overflow-hidden {
  overflow: hidden;
}

/*.sg0-shadow-md {
  box-shadow:0 0.9px 1.5px rgba(0, 0, 0, 0.03),0 3.1px 5.5px rgba(0, 0, 0, 0.08),0 14px 25px rgba(0, 0, 0, 0.12);
}*/

.sg0-radius-lg {
  border-radius: 0.5em;
  width: 75%;
  margin: 0px auto;
  border: solid 1px #dcdcdc;
  display: table;
}

.sg0-bg {
  --sg0-bg-o: 1;
  background-color: hsla(var(--sg0-color-bg-hsl), var(--sg0-bg-o, 1));
}

.sg0-flex-center {
  justify-content: center;
  align-items: center;
}

.sg0-flex {
  display: flex;
}

:where(.sg0-inner-glow) {
  position: relative!important;
}

.sg0-inner-glow::after {
  content: '';
  position: absolute!important;
  top: 0;
  left: 0;
  width: 100%;
  height: auto!important;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075);
}

.sg0-bg-light {
  --sg0-bg-o: 1;
  background-color: hsla(var(--sg0-color-bg-light-hsl), var(--sg0-bg-o, 1));
}



