/* Texas reference layout: Pen zfLrG / j08FC. Load after the shared stylesheet. */
#areas .texas-gdp-reference,
#areas .texas-crisis-chart {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 32px;
  row-gap: 20px;
  align-items: start;
  max-width: none;
  margin-inline: 0;
}
#areas .texas-gdp-intro > p + p { margin-top: 16px; }
#areas .texas-gdp-chart,
#areas .texas-crisis-plot {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin-inline: 0;
}
#areas .texas-gdp-chart { margin-block: 0; padding: 20px; }
#areas .texas-gdp-plot { width: 100%; min-width: 0; overflow: visible; }
#areas .texas-gdp-plot > svg {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: auto;
  aspect-ratio: 720 / 428;
}
#areas .texas-crisis-chart > .cycles-source { grid-column: 2; }
#areas .texas-crisis-plot > svg {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: auto;
  aspect-ratio: 960 / 520;
}

#areas .texas-growth-title {
  margin: 64px 0 32px;
  color: var(--ink);
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
}
#areas .texas-growth-title::after {
  display: block;
  width: 50px;
  height: 1px;
  margin-top: 8px;
  background: var(--blue);
  content: '';
}
#areas .texas-growth-reasons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: row;
  column-gap: 32px;
  row-gap: 24px;
  align-items: start;
  margin-top: 0;
}
#areas .texas-growth-reasons > article {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: subgrid;
  grid-row: span 3;
  column-gap: 24px;
  row-gap: 24px;
  align-items: start;
  min-width: 0;
}
#areas .texas-growth-reasons > article > h3 {
  grid-column: 1 / -1;
  grid-row: 1;
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 27px;
  text-wrap: balance;
}
#areas .texas-growth-reasons .texas-growth-graphic {
  display: block;
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: auto;
  aspect-ratio: 3 / 2;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #f6f6f6;
}
#areas .texas-growth-graphic > .texas-reason-diagram {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  margin: 0;
}
#areas .texas-growth-description {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  color: var(--body);
  font-size: var(--section-body-size, 16px);
  line-height: var(--section-body-leading, 1.8);
}
#areas .texas-growth-description > p { margin: 0; font: inherit; letter-spacing: inherit; }
#areas .texas-growth-reasons > article > .texas-sources {
  grid-column: 1 / -1;
  grid-row: 3;
  align-self: start;
  margin: 0;
}

@media (min-width: 768px) and (max-width: 1023px) {
  #areas .texas-growth-description { font-size: var(--section-body-size, 16px); }
}
@media (max-width: 767px) {
  #areas .texas-gdp-reference,
  #areas .texas-crisis-chart { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  #areas .texas-gdp-chart { padding: 16px; }
  #areas .texas-crisis-chart > .cycles-source { grid-column: 1; }
  #areas .texas-growth-title { margin-top: 40px; margin-bottom: 24px; }
  #areas .texas-growth-reasons {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc(100% - 48px);
    column-gap: 16px;
    row-gap: 16px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding-bottom: 16px;
  }
  #areas .texas-growth-reasons > article {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: subgrid;
    grid-row: span 4;
    row-gap: 16px;
    scroll-snap-align: start;
  }
  #areas .texas-growth-reasons > article > h3 { grid-column: 1; grid-row: 1; }
  #areas .texas-growth-reasons .texas-growth-graphic {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    align-self: start;
    width: min(100%, 270px);
    max-width: 270px;
    min-height: 0;
    max-height: 180px;
    height: auto;
    aspect-ratio: 3 / 2;
  }
  #areas .texas-growth-graphic > .texas-reason-diagram {
    width: 100%;
    max-width: 270px;
    max-height: 180px;
    height: auto;
  }
  #areas .texas-growth-description { grid-column: 1; grid-row: 3; font-size: var(--section-body-size, 14px); line-height: var(--section-body-leading, 1.8); }
  #areas .texas-growth-reasons > article > .texas-sources { grid-column: 1; grid-row: 4; }
}

/* Rankings take the former photograph's place, with population above two smaller facts. */
#areas .texas-intro{align-items:start}
#areas .texas-ranking-summary{min-width:0;width:100%;max-width:500px;margin-inline:auto}
#areas .texas-intro .texas-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px;margin:0}
#areas .texas-intro .texas-ranking-fact{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;grid-row:auto;row-gap:8px;min-width:0;padding:16px 8px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
#areas .texas-intro .texas-ranking-fact:first-child{grid-column:1/-1;padding:18px 12px 22px;border-bottom:0}
#areas .texas-intro .texas-ranking-fact>small:first-child{font-size:12px;line-height:18px;white-space:normal}
#areas .texas-intro .texas-ranking-fact>small:last-child{font-size:11px;line-height:18px;letter-spacing:0}
#areas .texas-intro .texas-ranking-fact .texas-ranking-badge{width:130px;min-height:0}
#areas .texas-intro .texas-ranking-fact .texas-ranking-value>span{font-size:11px;line-height:15px}
#areas .texas-intro .texas-ranking-fact .texas-ranking-value>strong{font-size:26px;line-height:32px}
#areas .texas-intro .texas-ranking-fact:first-child .texas-ranking-badge{width:174px}
#areas .texas-intro .texas-ranking-fact:first-child .texas-ranking-value>span{font-size:14px;line-height:18px}
#areas .texas-intro .texas-ranking-fact:first-child .texas-ranking-value>strong{font-size:35px;line-height:41px}
#areas .texas-ranking-summary>.texas-sources{margin-top:16px;font-size:10px;line-height:1.8}
#areas .texas-gdp-reference{grid-template-areas:"chart copy"}
#areas .texas-gdp-reference>.texas-gdp-chart{grid-area:chart}
#areas .texas-gdp-reference>.texas-gdp-intro{grid-area:copy}
@media(max-width:767px){
 #areas .texas-ranking-summary{max-width:460px;margin-top:6px}
 #areas .texas-intro .texas-facts{column-gap:14px}
 #areas .texas-intro .texas-ranking-fact{padding:14px 4px;row-gap:8px}
 #areas .texas-intro .texas-ranking-fact>small:last-child{font-size:10px;line-height:17px}
 #areas .texas-intro .texas-ranking-fact .texas-ranking-badge{width:126px}
 #areas .texas-intro .texas-ranking-fact:first-child .texas-ranking-badge{width:166px}
 #areas .texas-gdp-reference{grid-template-areas:"copy" "chart"}
}