.ai-gif-page .studio-wrap {
  display: flex;
  flex-direction: column;
  width: min(var(--sc-container), calc(100% - 64px));
  padding-inline: 0;
  padding-block: var(--sc-space-8) var(--sc-space-12);
  gap: var(--sc-space-6);
}

.ai-gif-page .studio-shell {
  grid-row: auto;
  max-width: var(--sc-container);
}

.ai-gif-page .studio-heading {
  display: block;
  width: 100%;
  max-width: var(--sc-hero-copy-width);
}

.ai-gif-page .studio-heading h1 { font-size: var(--sc-hero-title-size); line-height: var(--sc-hero-title-leading); }
.ai-gif-page .studio-heading > p:last-child { max-width: var(--sc-hero-lead-width); margin-inline: auto; font-size: var(--sc-hero-lead-size); line-height: var(--sc-hero-lead-leading); }

.ai-gif-notice,
.ai-gif-next-step {
  width: 100%;
  max-width: var(--sc-composer-width);
  margin: 0 auto;
  overflow-wrap: anywhere;
}

.ai-gif-workspace .model-picker__fixed-value {
  max-width: 100%;
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
}

.ai-gif-workspace .model-workspace__cost,
.ai-gif-workspace .model-workspace__submit {
  white-space: normal;
  overflow-wrap: anywhere;
}

.ai-gif-next-step {
  display: grid;
  justify-items: start;
  gap: var(--sc-space-4);
}

.ai-gif-next-step h2,
.ai-gif-next-step p {
  margin: 0;
}

.ai-gif-next-step p {
  color: var(--sc-color-muted);
  line-height: var(--sc-leading-copy);
}

.ai-gif-next-step .sc-button {
  text-align: center;
  white-space: normal;
}

.ai-gif-section { padding-block: var(--sc-space-12); }
.ai-gif-section > h2 { max-width: var(--sc-reading-width); }
.ai-gif-section p { font-size: var(--sc-content-small-size); }
.ai-gif-section > p { max-width: var(--sc-reading-width); }
.ai-gif-section .ai-gif-intro { margin-bottom: var(--sc-space-8); font-size: var(--sc-content-font-size); }
.ai-gif-examples { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sc-space-4); }
.ai-gif-examples figure { margin: 0; }
.ai-gif-examples .landing-sections__media { aspect-ratio: 1; object-fit: contain; }
.ai-gif-examples figcaption { padding: var(--sc-space-4); color: var(--sc-color-ink); font-size: var(--sc-font-size-md); line-height: 1.6; overflow-wrap: anywhere; }
.ai-gif-example-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-space-4); margin-top: var(--sc-space-5); }
.ai-gif-example-actions > a { display: inline-flex; align-items: center; min-height: var(--sc-control-height); color: var(--sc-color-brand-700); font-size: var(--sc-font-size-sm); line-height: var(--sc-leading-copy); text-underline-offset: .2em; }
.ai-gif-section .landing-sections__step h3 { font-size: var(--sc-font-size-xl); }
.ai-gif-section blockquote { margin: 0; }
.ai-gif-section blockquote p { color: var(--sc-color-ink); }
.ai-gif-section .landing-sections__related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row; grid-auto-columns: auto; gap: var(--sc-space-6); overflow: visible; }
.ai-gif-section .landing-sections__related p { font-size: var(--sc-content-small-size); }
.ai-gif-section .landing-sections__related h3 { font-size: var(--sc-font-size-xl); }
.ai-gif-section .landing-sections__related .landing-sections__media { aspect-ratio: 16 / 9; object-fit: contain; }
.ai-gif-closing { display: grid; justify-items: center; text-align: center; padding-block: var(--sc-space-16) var(--sc-space-10); }
.ai-gif-closing h2 { margin-bottom: var(--sc-space-6); }
.ai-gif-page sugarcube-footer { margin-top: 0; }

@media (max-width: 767px) {
  .ai-gif-page .studio-wrap { width: calc(100% - 32px); padding-block: var(--sc-space-6) var(--sc-space-8); gap: var(--sc-space-5); }
  .ai-gif-section { padding-block: var(--sc-space-8); }
  .ai-gif-section .ai-gif-intro { margin-bottom: var(--sc-space-6); }
  .ai-gif-examples { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-space-3); }
  .ai-gif-examples figcaption { padding: var(--sc-space-3); }
  .ai-gif-section .landing-sections__related { grid-template-columns: minmax(0, 1fr); }
  .ai-gif-section .landing-sections__copy { padding: var(--sc-space-5); }
  .ai-gif-examples .landing-sections__copy { padding: var(--sc-space-3); }
  .ai-gif-closing { padding-block: var(--sc-space-12) var(--sc-space-6); }
}

@media (max-width: 560px) {
  .ai-gif-page .studio-heading {
    display: block;
  }

}