/* ================================================================
  THEME GALLERY
================================================================ */
#js-gallery {
  overflow: hidden;
  position: relative;
}

#js-gallery .js-section__content {
  padding-bottom: calc(var(--js-padding) * 5);
}

.js-gallery__container,
.js-gallery__wrapper,
.js-gallery__row {
  display: flex;
  gap: calc(var(--js-padding) * 2);
}

.js-gallery__container {
  flex-direction: column;
  min-width: 100vw;
  margin-left: var(--js-margin);
  padding-top: calc(var(--js-padding) * 5);
  padding-left: 0;
  padding-right: 0;
}

.js-gallery__wrapper,
.js-gallery__row {
  align-items: flex-start;
  flex-wrap: nowrap;
  will-change: transform;
  position: relative;
}

.js-gallery__wrapper {
  min-width: auto;
  margin-left: var(--js-margin);
  margin-right: var(--js-margin);
  flex-direction: column;
}

.js-gallery__row {
  flex-direction: row;
}

.js-gallery__block {
  display: block;
  box-sizing: content-box;
  overflow: hidden;
  border-radius: var(--js-radius-md);
}

.js-gallery__image {
  width: 100%;
  height: auto;
}

/* Theme Gallery Media Queries */
@media (max-width: 575px) {
  .js-gallery__block {
    width: 70vw;
  }
}

@media (min-width: 576px) {
  .js-gallery__block {
    width: 40vw;
  }
}

/* ================================================================
  ANIMATIONS FOR SECTIONS
================================================================ */
/* Features
================================================================ */
.js-features :is(.js-section__content, .js-cards__block, .js-section__actions) {
  opacity: 0;
  will-change: transform, opacity;
}

.js-features .js-section__content {
  transform: translate(0px, -80px);
}

.js-features .js-cards__block:nth-child(1),
.js-features .js-cards__block:nth-child(3),
.js-features .js-cards__block:nth-child(5) {
  transform: translate(-160px, 0px);
}

.js-features .js-cards__block:nth-child(2),
.js-features .js-cards__block:nth-child(4),
.js-features .js-cards__block:nth-child(6) {
  transform: translate(160px, 0px);
}

.js-features .js-section__actions {
  transform: translate(0px, 80px);
}

/* AI Tools
================================================================ */
.js-ai-tools :is(.js-section__content, .js-cards__block, .js-section__actions) {
  opacity: 0;
  will-change: transform, opacity;
}

.js-ai-tools .js-section__content {
  transform: translate(0px, -80px);
}

.js-ai-tools .js-cards__block:nth-child(1) {
  transform: translate(-160px, 0px);
}

.js-ai-tools .js-cards__block:nth-child(3) {
  transform: translate(160px, 0px);
}

.js-ai-tools .js-section__actions {
  transform: translate(0px, 80px);
}

/* Gallery
================================================================ */
#js-gallery .js-section__content {
  opacity: 0;
  will-change: transform, opacity;
  transform: translate(0px, -80px);
}

/* Signup
================================================================ */
#js-signup-form {
  padding-top: calc(var(--js-padding) * 8);
  padding-bottom: calc(var(--js-padding) * 10);
}

#js-signup-form :is(.js-section__content, .js-signup) {
  opacity: 0;
  will-change: transform, opacity;
}

#js-signup-form .js-section__content {
  transform: translate(0px, -80px);
}

#js-signup-form .js-signup {
  transform: translate(0px, 40px);
}

@media (max-width: 575px) {
  #js-signup-form .js-signup {
    flex-direction: column;
    height: auto;
    gap: calc(var(--js-padding) * 1.5);
  }

  #js-signup-form .js-signup__input {
    border-radius: var(--js-radius-md) !important;
    padding: calc(var(--js-padding) * 1) calc(var(--js-padding) * 1.25);
    font-size: calc(var(--font-base-size) * 1);
  }

  #js-signup-form .js-signup__button {
    width: 100% !important;
  }
}

@media (min-width: 576px) {
  #js-signup-form .js-signup__input {
    border-radius: var(--js-radius-md) 0 0 var(--js-radius-md) !important;
  }
}