/* Updated Guide 01 hero: post-translation launch readiness */
.guide-breaks-hero {
  position: relative;
  display: block;
  aspect-ratio: 3000 / 1689;
  min-height: 0;
  padding: clamp(48px, 5vw, 72px);
  overflow: hidden;
  background-color: #f3f3f1;
  background-image: url("/assets/resources/multilingual-website-infrastructure-breakdown.webp");
  background-position: right center;
  background-size: 100% auto;
  background-repeat: no-repeat;
}

.guide-breaks-hero .guide-breadcrumb {
  position: relative;
  z-index: 2;
  margin-bottom: 34px;
}

.guide-breaks-copy {
  position: relative;
  z-index: 2;
  width: 40%;
  max-width: 500px;
}

.guide-breaks-hero h1 {
  margin: 0;
  max-width: 500px;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(52px, 4.15vw, 68px)!important;
  font-weight: 500;
  line-height: .98!important;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.guide-breaks-hero .guide-standfirst {
  max-width: 430px;
  margin: 24px 0 0;
  color: rgba(15,15,15,.72);
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.5;
}

.guide-breaks-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 16px;
  margin-top: 24px;
}

.guide-breaks-meta span {
  color: rgba(15,15,15,.56);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.guide-content .guide-section h3 {
  font-size: clamp(22px, 2.2vw, 31px);
  line-height: 1.2;
}

.guide-content .article-question {
  margin: 52px 0;
  padding: 30px 32px 32px;
  border-left: 4px solid #fdc41f;
  background: #fff;
}

.guide-content .article-question-eyebrow {
  margin: 0 0 14px;
}

.guide-content .article-question h2 {
  margin: 0;
  max-width: 960px;
  color: #0f0f0f;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(36px, 4.1vw, 54px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -.025em;
}

@media (max-width: 1100px) {
  .guide-breaks-hero {
    aspect-ratio: auto;
    min-height: 0;
    padding: 48px 34px 58vw;
    background-position: center bottom;
    background-size: 100% auto;
  }

  .guide-breaks-copy {
    width: min(720px, 100%);
    max-width: 720px;
  }

  .guide-breaks-hero h1 {
    max-width: 700px;
    font-size: clamp(48px, 7vw, 68px);
  }

  .guide-breaks-hero .guide-standfirst {
    max-width: 610px;
    font-size: 18px;
  }
}

@media (max-width: 700px) {
  .guide-breaks-hero {
    padding: 40px 22px 62vw;
  }

  .guide-breaks-hero .guide-breadcrumb {
    margin-bottom: 26px;
  }

  .guide-breaks-hero h1 {
    font-size: clamp(42px, 11.8vw, 56px);
  }

  .guide-breaks-hero .guide-standfirst {
    margin-top: 22px;
    font-size: 18px;
  }

  .guide-breaks-meta {
    margin-top: 22px;
  }
}