:root {
  --default-card-spacing: 40px;
  --large-card-spacing: 80px;
  --small-card-spacing: 20px;
  --slider-spacing: 60px
}

/* General card styles */
.two-card-widget {
  background: white;
  border-radius: var(--default-border-radius);
}

:is(.two-card-widget, .two-slider-widget) :is(p, span) {
  font-family: var(--e-global-typography-text-font-family), Sans-serif;
  font-size: var(--e-global-typography-text-font-size);
  font-weight: var(--e-global-typography-text-font-weight);
}

:is(.two-card-widget, .two-slider-widget) :is(h2) {
  font-family: var(--e-global-typography-61fe2b5-font-family), Sans-serif;
  font-size: var(--e-global-typography-61fe2b5-font-size);
  font-weight: var(--e-global-typography-61fe2b5-font-weight);
}

:is(.two-card-widget, .two-slider-widget) :is(h3) {
  font-family: var(--e-global-typography-f546e9a-font-family), Sans-serif;
  font-size: var(--e-global-typography-f546e9a-font-size);
  font-weight: var(--e-global-typography-f546e9a-font-weight);
}

.two-card-inner {
  display: flex;
  height: 100%;
}

.two-card-widget.two-card-basic .two-card-inner.right {
  flex-direction: row;
}

.two-card-widget.two-card-basic .two-card-inner.left {
  flex-direction: row-reverse;
}

.two-card-widget.two-card-vertical .two-card-inner {
  flex-direction: column-reverse;
}

.timeline .two-card-widget.two-card-vertical .two-card-inner {
  flex-direction: column;
}

.timeline .elementor-widget-card,
.timeline .two-card-vertical {
  height: 100% !important;
}

.two-card-text {
  padding: var(--default-card-spacing);
  /* TODO make clamp for responsive */
  color: var(--e-global-color-primary) !important;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.two-card-inner button {
  margin-top: var(--small-spacing);
  background-color: var(--e-global-color-primary) !important;
  width: fit-content;
  padding: 12px 24px;
}

:is(.gridify, .gridify4) .two-card-vertical button {
  width: 100%;
}


.two-card-inner button:hover {
  background-color: var(--e-global-color-6304bf2) !important;
}

.two-card-vertical button {
  margin-top: auto;
}

.two-card-text button a,
.two-slider-content button a {
  color: white !important;
  text-wrap: wrap;
}

.two-card-extra-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--default-card-spacing) / 2);
}

.two-card-image img {
  height: 100% !important;
  width: 100% !important;
  object-fit: cover;
  border-radius: var(--default-border-radius) var(--default-border-radius) 0 0 !important;
}

.timeline .two-card-image img {
  height: 100% !important;
  width: 100% !important;
  object-fit: cover;
  border-radius: 0 !important;
  padding: var(--small-card-spacing);
}

.two-card-image.right img {
  border-radius: 0 var(--default-border-radius) var(--default-border-radius) 0 !important;
}

.two-card-image.left img {
  border-radius: var(--default-border-radius) 0 0 var(--default-border-radius) !important;
}

.gridify .two-card-vertical {
  height: 100%;
}

.two-card-vertical .two-card-image img {
  height: 350px !important;
}

.timeline .two-card-vertical .two-card-image img {
  height: 180px !important;
}

.gridify .two-card-vertical .two-card-image img {
  height: 300px !important;
}

.gridify.gridify2 .two-card-vertical .two-card-image img {
  height: 350px !important;
}

.gridify.gridify4 .two-card-vertical .two-card-image img {
  height: 200px !important;
}

.two-card-vertical .two-card-image img.two-card-icon {
  position: absolute;
  left: 50%;
  top: 250px;
  transform: translateX(-50%);
  height: 100px !important;
  width: auto !important;
  overflow: hidden;
  border-radius: 0 !important;
}

/* 'Basic' preset card styles */
.two-card-widget.two-card-basic .two-card-text {
  flex: 0 1 60%;
}

.two-card-widget.two-card-basic .two-card-image {
  flex: 0 1 40%;
}

/* 'Large' preset card styles */
.two-card-widget.two-card-large .two-card-text {
  padding: calc(var(--default-card-spacing) * 2);
  /* TODO make clamp for responsive */
  flex: 0 1 50%;
}

.two-card-widget.two-card-large .two-card-image {
  flex: 0 1 50%;
}

/* Slider card styles */
.two-slider-widget {
  background: white;
  border-radius: var(--default-border-radius) !important;
}

.two-slide-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 550px !important;
  /* i give up, forced height it is */
}

.two-slider-content {
  background-color: white;
  padding: var(--slider-spacing) 0 var(--slider-spacing) var(--slider-spacing);
  border-radius: var(--default-border-radius) !important;
}

.two-slider-image {
  margin: 60px;
  display: flex;
}

.image-padding img {
  padding: 40px;
  height: auto !important;
}

.two-slider-image img {
  border-radius: var(--default-border-radius) !important;
  width: 100%;
  object-fit: cover;
  height: 100% !important;
  max-height: 430px !important;
}

.glide__slide {
  margin: 0 auto;
  height: 550px !important;
  /* i give up, forced height it is */

}

.glide__arrows {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}

.glide__arrow {
  background: none !important;
}

.glide__arrow img {
  padding: 0;
}

.glide__arrow.glide__arrow--right img {
  transform: rotate(180deg);
}

@media screen and (max-width: 1024px) {
  .glide__slide {
    margin: 0;
    height: auto !important;
  }

  .two-slide-inner {
    grid-template-columns: 1fr;
    height: auto !important;
  }

  .two-slider-image {
    order: -1;
  }

  .two-slider-image img {
    height: 300px !important;
    object-fit: cover;
    width: 100%;
  }

  .two-slider-content {
    padding: 0 var(--slider-spacing);
  }

  .timeline .two-slider-content {
    padding: 0;
  }

  .glide__arrows {
    top: 530px;
  }
}

@media screen and (max-width: 810px) {
  .two-card-widget.two-card-basic .two-card-inner.right {
    flex-direction: column-reverse;
  }

  .two-card-widget.two-card-basic .two-card-inner.left {
    flex-direction: column-reverse;
  }

  .two-card-image.right img {
    border-radius: var(--default-border-radius) var(--default-border-radius) 0 0 !important;
  }

  .two-card-image.left img {
    border-radius: var(--default-border-radius) var(--default-border-radius) 0 0 !important;
  }

  .two-card-image img {
    max-height: 350px;
  }

  .two-card-extra-content {
    grid-template-columns: 1fr;
  }
}