div.flex:has(> div):has(.shopify-app-block.newsletter-signup) {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: repeat(2, auto);
  grid-column-gap: var(--gap-sm-xl);
  grid-row-gap: var(--gap-sm-xl);
  padding: 25px;
}

div:has(> .shopify-app-block.newsletter-signup) {
  margin: 0 !important;
}

div.flex:has(> div):has(.shopify-app-block.newsletter-signup_image) {
  grid-template-rows: repeat(3, auto);
}

.newsletter-signup picture {
  margin: 1rem 0;
  display: block;
}

.newsletter-signup picture.hidden {
  display: none;
}

.newsletter-signup form button[type='submit'] {
  z-index: 1;
}

.newsletter-signup form button[type='submit'].fullwidth {
  width: 100%;
}

div:has(> .newsletter-signup_image):has(.below) {
  order: 3;
}

@media (min-width: 768px) {
  div.flex:has(> div):has(.shopify-app-block.newsletter-signup) {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
  }

  div.flex:has(> div):has(.shopify-app-block.newsletter-signup_image) {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    align-items: center;
  }

  div.flex:has(> div):has(.shopify-app-block.newsletter-signup_description):has(
      .use-form-column
    ) {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  div.flex:has(> div):has(.newsletter-signup_description):has(
      .use-form-column
    ):has(.newsletter-signup_image) {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }

  div:has(> .shopify-app-block.newsletter-signup) {
    order: 1;
    margin: 0 !important;
    padding: 0 !important;
  }

  div:has(> .shopify-app-block.newsletter-signup_image) {
    order: 0;
    grid-row: 2 span;
  }

  .newsletter-signup_image .md-raised picture {
    top: -125px;
    position: relative;
  }

  .newsletter-signup picture {
    padding: 0;
  }
}