.store-content-block {
  display: flex;
  flex-direction: column;
  background-color: var(--dna-color-sandstone);
  gap: var(--dna-space-4);
  margin-right: var(--dna-space-4);
  padding: var(--dna-space-2);

  .store-content-block__image {
    aspect-ratio: 1;
    width: 100%;
    height: 100%;
  }
  .store-content-block__content {
    gap: var(--dna-space-2);
    padding: 0 var(--dna-space-2) var(--dna-space-4);

    h3 {
      font: var(--dna-h3-font);
    }
    p {
      font: var(--dna-body-p2-font);
    }
  }

  .signup-form {
    margin-top: var(--dna-space-6);
  }
  .signup-form .contact-form {
    height: calc(var(--dna-space-10) + var(--dna-space-2));
  }
  .signup-form__inputs {
    display: block;
    border: none;
    height: 100%;
    position: relative;
  }
  .signup-form__input {
    background-color: var(--dna-color-sandstone);
    border: none;
    max-width: unset;
    height: 100%;
    width: 100%;
  }
  .signup-form__input::part(form-control),
  .signup-form__input::part(form-control-input) {
    height: 100%;
  }
  .signup-form__input[variant="floating-label"]::part(form-control-label) {
    margin: 0 var(--dna-space-4);
    padding: 0;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: all .2s ease;
  }
  .signup-form__input[variant="floating-label"]:is(:focus,:focus-within,:focus-visible,[data-user-valid],[data-user-invalid])::part(form-control-label) {
    padding: 0 var(--dna-space-1);
    left: calc(var(--dna-space-2) * -1);
    top: calc((var(--dna-space-2) - var(--dna-space-0-5)) * -1);
    transform: translateY(0) scale(.9);
  }
  .signup-form__input::part(base) {
    background-color: var(--dna-color-sandstone);
    border: 1px solid var(--dna-utility-disabled);
    box-shadow: none;
    height: 100%;
  }
  .signup-form__input::part(input) {
    height: 100%;
    width: 100%;
  }
  .signup-form__input::part(input):focus {
    border: 1px solid var(--dna-brand-primary);
  }
  .signup-form__input[variant='floating-label']::part(form-control-label) {
    background-color: var(--dna-color-sandstone);
  }
  .signup-form__submit {
    box-sizing: content-box;
    height: 100%;
    padding: 0 var(--dna-space-4);
    width: var(--dna-space-8);
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);

    svg {
      height: 100%;
      width: auto;
    }
  }
  .signup-form__legal {
    font: var(--dna-body-p3-font) !important;
    height: 0;
    opacity: 0;
    transition: all .2s ease;
  }
  .signup-form__legal.active {
    height: calc(var(--dna-space-10) + var(--dna-space-2));
    margin-top: var(--dna-space-3);
    opacity: 1;
  }
}

@media screen and (min-width: 768px) {
  .store-content-block {
    flex-direction: row;
    gap: var(--dna-space-4);
    margin-right: var(--dna-space-10);
    padding: var(--dna-space-4);

    .store-content-block__image {
      height: 240px;
      width: 240px;
    }
    .store-content-block__content {
      gap: var(--dna-space-4);

      h3 {
        font: var(--dna-h5-font);
      }
      p {
        font: var(--dna-body-p1-font);
      }
    }
    .signup-form {
      margin-top: var(--dna-space-2);
    }
  }
}

@media screen and (min-width: 1024px) {
  .store-content-block {
    margin-right: var(--dna-space-10);

    .signup-form {
      margin-top: 0;
      max-width: 432px;
    }
    .signup-form__legal,
    .signup-form__legal.active {
      height: unset;
      margin-top: var(--dna-space-3);
      opacity: 1;
    }
  }
}

@media screen and (min-width: 1440px) {
  .store-content-block {
    gap: var(--dna-space-10);
    padding: var(--dna-space-10);
  }
}