.interactive-gallery {
  --smSize: 45%;
  --mdSize: 70%;
  --lgSize: 93%;
  --xlSize: 200%;
  padding-inline: var(--siteMargin);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  row-gap: 30px;
}
.interactive-gallery__cursor {
  z-index: 5;
  pointer-events: none;
  position: absolute;
  width: fit-content;
  max-width: 0px;
  opacity: 0;
  overflow: hidden;
  transition: max-width var(--tLongZip) 300ms, opacity var(--tMedZip) 300ms;
}
.interactive-gallery__cursor-button {
  padding: 12px 32px;
  background-color: var(--yellow1);
  border-radius: 50px;
}
.interactive-gallery__cursor-button-content {
  opacity: 0;
  transition: opacity var(--tLongZip) 0ms;
  white-space: nowrap;
}
.interactive-gallery__cursor.active .interactive-gallery__cursor-button-content {
  opacity: 1;
  transition: opacity var(--tLongZip) 300ms;
}
.interactive-gallery__content {
  display: flex;
  flex-direction: column;
  row-gap: 12px;
}
.interactive-gallery__title {
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
}
.interactive-gallery__subtitle {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.28px;
  color: var(--black5);
}
.interactive-gallery__gallery {
  aspect-ratio: 2.1;
  overflow: hidden;
  border-radius: 15px;
  position: relative;
}
.interactive-gallery__item {
  inset: 0;
  position: absolute;
}
.interactive-gallery__item .interactive-gallery__image {
  mask-position: center;
  mask-repeat: no-repeat;
  position: absolute;
  inset: 0;
  transition: all 300ms ease;
}
.interactive-gallery__item:nth-of-type(1) {
  z-index: 4;
}
.interactive-gallery__item:nth-of-type(1) .interactive-gallery__image {
  mask-image: url("logo-inner.svg");
}
.interactive-gallery__item:nth-of-type(2) {
  z-index: 3;
}
.interactive-gallery__item:nth-of-type(2) .interactive-gallery__image {
  mask-image: url("logo-center.svg");
}
.interactive-gallery__item:nth-of-type(3) {
  z-index: 2;
}
.interactive-gallery__item:nth-of-type(3) .interactive-gallery__image {
  mask-image: url("logo-outer.svg");
}
.interactive-gallery__item:nth-of-type(4) {
  z-index: 1;
}
.interactive-gallery__item:nth-of-type(4) .interactive-gallery__image {
  mask-image: url("logo-outer.svg");
}
.interactive-gallery__gallery[data-step="4"] .interactive-gallery__item:nth-of-type(1) .interactive-gallery__image:not(:nth-of-type(4)) {
  mask-size: 0%;
}
.interactive-gallery__gallery[data-step="4"] .interactive-gallery__item:nth-of-type(1) .interactive-gallery__image:nth-of-type(4) {
  mask-size: var(--smSize);
  z-index: 1;
}
.interactive-gallery__gallery[data-step="4"] .interactive-gallery__item:nth-of-type(2) .interactive-gallery__image:not(:nth-of-type(3)) {
  mask-size: var(--smSize);
}
.interactive-gallery__gallery[data-step="4"] .interactive-gallery__item:nth-of-type(2) .interactive-gallery__image:nth-of-type(3) {
  mask-size: var(--mdSize);
  z-index: 1;
}
.interactive-gallery__gallery[data-step="4"] .interactive-gallery__item:nth-of-type(3) .interactive-gallery__image:not(:nth-of-type(2)) {
  mask-size: var(--mdSize);
}
.interactive-gallery__gallery[data-step="4"] .interactive-gallery__item:nth-of-type(3) .interactive-gallery__image:nth-of-type(2) {
  mask-size: var(--lgSize);
  z-index: 1;
}
.interactive-gallery__gallery[data-step="4"] .interactive-gallery__item:nth-of-type(4) .interactive-gallery__image:not(:nth-of-type(1)) {
  mask-size: var(--lgSize);
}
.interactive-gallery__gallery[data-step="4"] .interactive-gallery__item:nth-of-type(4) .interactive-gallery__image:nth-of-type(1) {
  mask-size: var(--xlSize);
  z-index: 1;
}
.interactive-gallery__gallery[data-step="3"] .interactive-gallery__item:nth-of-type(1) .interactive-gallery__image:not(:nth-of-type(3)) {
  mask-size: 0%;
}
.interactive-gallery__gallery[data-step="3"] .interactive-gallery__item:nth-of-type(1) .interactive-gallery__image:nth-of-type(3) {
  mask-size: var(--smSize);
  z-index: 1;
}
.interactive-gallery__gallery[data-step="3"] .interactive-gallery__item:nth-of-type(2) .interactive-gallery__image:not(:nth-of-type(2)) {
  mask-size: var(--smSize);
}
.interactive-gallery__gallery[data-step="3"] .interactive-gallery__item:nth-of-type(2) .interactive-gallery__image:nth-of-type(2) {
  mask-size: var(--mdSize);
  z-index: 1;
}
.interactive-gallery__gallery[data-step="3"] .interactive-gallery__item:nth-of-type(3) .interactive-gallery__image:not(:nth-of-type(1)) {
  mask-size: var(--mdSize);
}
.interactive-gallery__gallery[data-step="3"] .interactive-gallery__item:nth-of-type(3) .interactive-gallery__image:nth-of-type(1) {
  mask-size: var(--lgSize);
  z-index: 1;
}
.interactive-gallery__gallery[data-step="3"] .interactive-gallery__item:nth-of-type(4) .interactive-gallery__image:not(:nth-of-type(4)) {
  mask-size: var(--lgSize);
}
.interactive-gallery__gallery[data-step="3"] .interactive-gallery__item:nth-of-type(4) .interactive-gallery__image:nth-of-type(4) {
  mask-size: var(--xlSize);
  z-index: 1;
}
.interactive-gallery__gallery[data-step="2"] .interactive-gallery__item:nth-of-type(1) .interactive-gallery__image:not(:nth-of-type(2)) {
  mask-size: 0%;
}
.interactive-gallery__gallery[data-step="2"] .interactive-gallery__item:nth-of-type(1) .interactive-gallery__image:nth-of-type(2) {
  mask-size: var(--smSize);
  z-index: 1;
}
.interactive-gallery__gallery[data-step="2"] .interactive-gallery__item:nth-of-type(2) .interactive-gallery__image:not(:nth-of-type(1)) {
  mask-size: var(--smSize);
}
.interactive-gallery__gallery[data-step="2"] .interactive-gallery__item:nth-of-type(2) .interactive-gallery__image:nth-of-type(1) {
  mask-size: var(--mdSize);
  z-index: 1;
}
.interactive-gallery__gallery[data-step="2"] .interactive-gallery__item:nth-of-type(3) .interactive-gallery__image:not(:nth-of-type(4)) {
  mask-size: var(--mdSize);
}
.interactive-gallery__gallery[data-step="2"] .interactive-gallery__item:nth-of-type(3) .interactive-gallery__image:nth-of-type(4) {
  mask-size: var(--lgSize);
  z-index: 1;
}
.interactive-gallery__gallery[data-step="2"] .interactive-gallery__item:nth-of-type(4) .interactive-gallery__image:not(:nth-of-type(3)) {
  mask-size: var(--lgSize);
}
.interactive-gallery__gallery[data-step="2"] .interactive-gallery__item:nth-of-type(4) .interactive-gallery__image:nth-of-type(3) {
  mask-size: var(--xlSize);
  z-index: 1;
}
.interactive-gallery__gallery[data-step="1"] .interactive-gallery__item:nth-of-type(1) .interactive-gallery__image:not(:nth-of-type(1)) {
  mask-size: 0%;
}
.interactive-gallery__gallery[data-step="1"] .interactive-gallery__item:nth-of-type(1) .interactive-gallery__image:nth-of-type(1) {
  mask-size: var(--smSize);
  z-index: 1;
}
.interactive-gallery__gallery[data-step="1"] .interactive-gallery__item:nth-of-type(2) .interactive-gallery__image:not(:nth-of-type(4)) {
  mask-size: var(--smSize);
}
.interactive-gallery__gallery[data-step="1"] .interactive-gallery__item:nth-of-type(2) .interactive-gallery__image:nth-of-type(4) {
  mask-size: var(--mdSize);
  z-index: 1;
}
.interactive-gallery__gallery[data-step="1"] .interactive-gallery__item:nth-of-type(3) .interactive-gallery__image:not(:nth-of-type(3)) {
  mask-size: var(--mdSize);
}
.interactive-gallery__gallery[data-step="1"] .interactive-gallery__item:nth-of-type(3) .interactive-gallery__image:nth-of-type(3) {
  mask-size: var(--lgSize);
  z-index: 1;
}
.interactive-gallery__gallery[data-step="1"] .interactive-gallery__item:nth-of-type(4) .interactive-gallery__image:not(:nth-of-type(2)) {
  mask-size: var(--lgSize);
}
.interactive-gallery__gallery[data-step="1"] .interactive-gallery__item:nth-of-type(4) .interactive-gallery__image:nth-of-type(2) {
  mask-size: var(--xlSize);
  z-index: 1;
}
@media (max-width: 768px) {
  .interactive-gallery__gallery {
    --smSize: 55%;
    --mdSize: 80%;
    --lgSize: 100%;
    aspect-ratio: 0.8;
  }
  .interactive-gallery__gallery .aspectholder {
    height: 100%;
    width: 100%;
  }
  .interactive-gallery__cursor {
    display: none;
  }
}