.wp-block-kateva-horizontal-accordion.gs-horizontal-accordion {
  /* --gs-accordion-height: 460px; */
  --gs-accordion-height: 180px;
  display: flex;
  width: 100%;
  height:var(--gs-accordion-height);
  min-height: var(--gs-accordion-height);
  overflow: hidden;
  border-radius: 14px;
  background: var(--wp--preset--color--ink);
}

.gs-horizontal-accordion__panel {
  position: relative;
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--gs-accordion-height);
  overflow: hidden;
  isolation: isolate;
  background-color: var(--wp--preset--color--ink-light);
  background-position: center;
  background-size: cover;
  cursor: pointer;
  transition: flex-grow .5s cubic-bezier(.2,.75,.25,1), filter .35s ease;
}

.gs-horizontal-accordion__panel + .gs-horizontal-accordion__panel {
  border-left: 1px solid  color-mix(
    in srgb,
    var(--wp--preset--color--paper) 20%,
    transparent
  );
}

.gs-horizontal-accordion.has-active .gs-horizontal-accordion__panel {
  flex-grow: .72;
}

.gs-horizontal-accordion.has-active .gs-horizontal-accordion__panel.is-active,
.gs-horizontal-accordion__panel.is-active {
  flex-grow: 2.15;
}

.gs-horizontal-accordion__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    color-mix(
      in srgb,
      var(--wp--preset--color--ink) 2%,
      transparent
    ) 0%,
    color-mix(
      in srgb,
      var(--wp--preset--color--ink) 18%,
      transparent
    ) 40%,
    color-mix(
      in srgb,
      var(--wp--preset--color--ink) 72%,
      transparent
    ) 100%
  );
  transition: background .35s ease;
}

.gs-horizontal-accordion__panel.is-active .gs-horizontal-accordion__overlay {
  background: linear-gradient(
    180deg,
    color-mix(
      in srgb,
      var(--wp--preset--color--brand) 18%,
      transparent
    ) 0%,
    color-mix(
      in srgb,
      var(--wp--preset--color--brand) 34%,
      transparent
    ) 45%,
    color-mix(
      in srgb,
      var(--wp--preset--color--ink) 84%,
      transparent
    ) 100%
  );
}

.gs-horizontal-accordion__content {
  align-self: flex-end;
  width: 100%;
  padding: clamp(1.25rem, 2.8vw, 2.5rem);
  color: var(--wp--preset--color--paper);
}

.gs-horizontal-accordion__title {
  margin: 0;
  color: inherit;
  font-size: clamp(1.35rem, 2.2vw, 2.1rem);
  line-height: 1.08;
}

.gs-horizontal-accordion__body {
  max-width: 42rem;
  margin: .8rem 0 0;
  color: color-mix(
    in srgb,
    var(--wp--preset--color--paper) 90%,
    transparent
  );
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transform: translateY(12px);
  transition: opacity .3s ease .08s, transform .3s ease .08s, max-height .3s ease;
}

.gs-horizontal-accordion__link {
  display: inline-block;
  margin-top: 1.2rem;
  color: var(--wp--preset--color--paper);;
  font-weight: 700;
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transform: translateY(12px);
  transition: opacity .3s ease .12s, transform .3s ease .12s, max-height .3s ease;
}

.gs-horizontal-accordion__panel.is-active .gs-horizontal-accordion__body,
.gs-horizontal-accordion__panel.is-active .gs-horizontal-accordion__link {
  opacity: 1;
  max-height:fit-content;
  transform: translateY(0);
}

.gs-horizontal-accordion__panel:focus-visible {
  outline: 3px solid var(--wp--preset--color--paper);
  outline-offset: -4px;
}

@media (hover: hover) and (pointer: fine) {
  .gs-horizontal-accordion__panel:hover {
    filter: brightness(1.04);
  }
}

@media (max-width: 781px) {
  .wp-block-kateva-horizontal-accordion.gs-horizontal-accordion {
    display: block;
    min-height: 0;
    border-radius: 10px;
  }

  .gs-horizontal-accordion__panel,
  .gs-horizontal-accordion.has-active .gs-horizontal-accordion__panel,
  .gs-horizontal-accordion.has-active .gs-horizontal-accordion__panel.is-active,
  .gs-horizontal-accordion__panel.is-active {
    min-height: 180px;
    max-height: 180px;
    border-left: 0;
    border-top: 1px solid 1px solid color-mix(
      in srgb,
      var(--wp--preset--color--paper) 20%,
      transparent
    );
    transition: min-height .4s ease, max-height .4s ease;
  }

  .gs-horizontal-accordion__panel:first-child {
    border-top: 0;
  }

  .gs-horizontal-accordion__panel.is-active {
    min-height: 340px;
    /* max-height: 420px; */
    max-height:var(--gs-accordion-height);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gs-horizontal-accordion__panel,
  .gs-horizontal-accordion__body,
  .gs-horizontal-accordion__link,
  .gs-horizontal-accordion__overlay {
    transition: none;
  }
}