/*
 * SOA イベントバナー バリアント：la-sunset-skyline
 * 対象記事：UFC 331（ヴァン対パントージャ2／現地2026年9月19日・日本時間9月20日）
 *
 * 設置先：project-child-theme/assets/event-banners/la-sunset-skyline.css
 *
 * 重要：event-banner-base.css は box-sizing / container-type / br非表示 などの
 * リセットしか持たない。グリッド・余白・文字サイズを含むレイアウト一式は
 * このバリアントファイル側で完結させる。配色だけを書くと無装飾のバナーになる。
 *
 * 単位は cqw（コンテナクエリ）を使う。base.css が .soa-event-banner に
 * container-type:inline-size を与えているため、記事カラム幅に追従する。
 *
 * 構造：日没のスカイライン型（2026年9月3日、Syunが選択）
 *   sacramento-capital-grid の「チケット半券」型（右にスタブ）、
 *   shanghai-bund-neon の「タイムライン」型（左が過去・右が現在）、
 *   paris-tricolore-scale の「天秤」型（左右対称の2枚パネル）、
 *   noche-papel-picado の「切り絵」型（上辺に帯）のいずれとも別物にする。
 *   横に走る地平線で画面を上下に割り、下辺にダウンタウンLAのビル影と
 *   ヤシの木のシルエットを敷いて、その奥に沈む陽を置く。
 *     __sun     = 沈む陽。放射グラデーションの円
 *     __skyline = 地平線。ビル群（1枚）とヤシ（左右2本）の3レイヤー
 *     以下、__header → __body（__match-list → __copy → __countdown） → __footer
 *   __footer は地平線の上に重ね、下からの暗いスクリムで可読性を確保する。
 *   __aside（半券）は使わない。
 *
 *   メインカードは現地時間の午後6時開始で、ちょうど日没の時刻にあたる。
 *   構造そのものが開催地と開始時刻の説明になっている。
 *
 * 配色：サンセット・ブールバード（2026年9月3日、Syunが選択）
 *   太平洋に沈む夕陽。藍紫 #1b1440 から マゼンタ #a8386a を経て 橙 #f4813f へ
 *   縦に抜けるグラデーションを主面にし、差し色は金寄りの #ffbe63。
 *   シルエットは黒（SVG側で #000 固定）で、背景の明度差だけで抜く。
 *
 * 図版は実写を使わず、data URI の SVG（矩形とパスのみ）で描いている。
 *
 * バナーに載せる数値は「大会後も意味が変わらないもの」に限る（design-specs.md）。
 * オッズ・ランキング・連勝数はここに置かず、留保を書ける本文側に置いている。
 * 「8 YEARS LATER」はUFC 227（2018年8月）からの経過年数で、大会後も変わらない。
 */

.soa-event-banner--la-sunset-skyline {
  --la-night: #1b1440;
  --la-dusk: #4a1f5e;
  --la-magenta: #a8386a;
  --la-glow: #f4813f;
  --la-gold: #ffbe63;
  --la-gold-deep: #b4541b;
  --la-ink: #fdf3e6;
  --la-ink-dim: rgba(253, 243, 230, .74);
  --la-rule: rgba(255, 190, 99, .5);

  --la-pad-x: clamp(15px, 2.8cqw, 26px);
  --la-pad-top: clamp(14px, 2.6cqw, 23px);
  --la-pad-bottom: clamp(50px, 9cqw, 78px);
  --la-skyline-h: clamp(66px, 12cqw, 104px);

  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 20rem;
  padding: var(--la-pad-top) var(--la-pad-x) var(--la-pad-bottom);
  border-radius: 6px;
  overflow: hidden;
  color: var(--la-ink);
  background: linear-gradient(180deg,
    var(--la-night) 0%,
    var(--la-dusk) 46%,
    var(--la-magenta) 76%,
    var(--la-glow) 100%);
  font-family: var(--font-family-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif);
}

/* ---- 沈む陽 ---- */
.soa-event-banner--la-sunset-skyline .soa-event-banner__sun {
  display: block;
  position: absolute;
  left: 50%;
  bottom: clamp(46px, 8.4cqw, 73px);
  width: clamp(96px, 19cqw, 150px);
  aspect-ratio: 1;
  margin-left: clamp(-75px, -9.5cqw, -48px);
  border-radius: 50%;
  opacity: .9;
  background: radial-gradient(circle,
    var(--la-gold) 0 46%,
    rgba(255, 190, 99, .34) 47% 62%,
    transparent 66%);
}

/* ---- 地平線（ビル群＋ヤシ2本） ---- */
.soa-event-banner--la-sunset-skyline .soa-event-banner__skyline {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--la-skyline-h);
  opacity: .92;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 160'%3E%3Cg fill='%23000'%3E%3Cpath d='M44 160 C40 118 39 86 45 58 L58 58 C52 86 56 118 61 160 Z'/%3E%3Cpath d='M51 58 C33 42 15 38 1 44 C15 47 33 52 52 66 Z'/%3E%3Cpath d='M51 58 C69 42 87 38 101 44 C87 47 69 52 50 66 Z'/%3E%3Cpath d='M51 58 C38 36 31 18 32 1 C41 19 47 39 56 60 Z'/%3E%3Cpath d='M51 58 C64 36 71 18 70 1 C61 19 55 39 46 60 Z'/%3E%3Cpath d='M51 61 C33 57 14 62 0 76 C17 65 34 62 52 69 Z'/%3E%3Cpath d='M51 61 C69 57 88 62 102 76 C85 65 68 62 50 69 Z'/%3E%3Ccircle cx='51' cy='60' r='7'/%3E%3C/g%3E%3C/svg%3E") left bottom / auto 116% no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 160'%3E%3Cg fill='%23000'%3E%3Cpath d='M44 160 C40 118 39 86 45 58 L58 58 C52 86 56 118 61 160 Z'/%3E%3Cpath d='M51 58 C33 42 15 38 1 44 C15 47 33 52 52 66 Z'/%3E%3Cpath d='M51 58 C69 42 87 38 101 44 C87 47 69 52 50 66 Z'/%3E%3Cpath d='M51 58 C38 36 31 18 32 1 C41 19 47 39 56 60 Z'/%3E%3Cpath d='M51 58 C64 36 71 18 70 1 C61 19 55 39 46 60 Z'/%3E%3Cpath d='M51 61 C33 57 14 62 0 76 C17 65 34 62 52 69 Z'/%3E%3Cpath d='M51 61 C69 57 88 62 102 76 C85 65 68 62 50 69 Z'/%3E%3Ccircle cx='51' cy='60' r='7'/%3E%3C/g%3E%3C/svg%3E") right bottom / auto 132% no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cg fill='%23000'%3E%3Crect x='0' y='52' width='36' height='48'/%3E%3Crect x='40' y='34' width='26' height='66'/%3E%3Crect x='70' y='62' width='42' height='38'/%3E%3Crect x='116' y='18' width='24' height='82'/%3E%3Crect x='124' y='6' width='8' height='14'/%3E%3Crect x='144' y='46' width='30' height='54'/%3E%3Crect x='178' y='28' width='18' height='72'/%3E%3Crect x='200' y='58' width='46' height='42'/%3E%3Crect x='250' y='38' width='24' height='62'/%3E%3Crect x='278' y='66' width='36' height='34'/%3E%3Crect x='318' y='48' width='28' height='52'/%3E%3Crect x='350' y='26' width='20' height='74'/%3E%3Crect x='374' y='58' width='26' height='42'/%3E%3C/g%3E%3C/svg%3E") center bottom / 100% 74% no-repeat;
}

/* ---- 本文レイヤーを図版より前に出す ---- */
.soa-event-banner--la-sunset-skyline > .soa-event-banner__header,
.soa-event-banner--la-sunset-skyline > .soa-event-banner__body {
  position: relative;
  z-index: 1;
}

/* ---- ヘッダー ---- */
.soa-event-banner--la-sunset-skyline .soa-event-banner__header {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.soa-event-banner--la-sunset-skyline .soa-event-banner__label {
  font-size: clamp(8px, 1.3cqw, 11px);
  font-weight: 700;
  letter-spacing: .26em;
  color: var(--la-gold);
}

.soa-event-banner--la-sunset-skyline .soa-event-banner__title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(27px, 6.3cqw, 47px);
  font-weight: 900;
  line-height: 1;
}

.soa-event-banner--la-sunset-skyline .soa-event-banner__meta {
  font-size: clamp(8px, 1.4cqw, 11px);
  letter-spacing: .13em;
  color: var(--la-ink-dim);
}

/* ---- 本体 ---- */
.soa-event-banner--la-sunset-skyline .soa-event-banner__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(3px, .7cqw, 6px);
  padding: clamp(6px, 1.2cqw, 11px) 0;
}

.soa-event-banner--la-sunset-skyline .soa-event-banner__match-list,
.soa-event-banner--la-sunset-skyline .soa-event-banner__match {
  display: block;
}

.soa-event-banner--la-sunset-skyline .soa-event-banner__division {
  font-size: clamp(8px, 1.3cqw, 11px);
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--la-gold);
}

.soa-event-banner--la-sunset-skyline .soa-event-banner__match--main .soa-event-banner__division {
  color: var(--la-gold);
}

.soa-event-banner--la-sunset-skyline .soa-event-banner__fighters {
  font-size: clamp(17px, 3.6cqw, 28px);
  font-weight: 800;
  line-height: 1.15;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}

.soa-event-banner--la-sunset-skyline .soa-event-banner__copy {
  font-size: clamp(10px, 1.6cqw, 13px);
  color: var(--la-ink-dim);
}

/* ---- カウントダウン ---- */
.soa-event-banner--la-sunset-skyline .soa-event-banner__countdown {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 2px;
}

.soa-event-banner--la-sunset-skyline .soa-event-banner__countdown-label {
  font-size: clamp(8px, 1.2cqw, 10px);
  letter-spacing: .2em;
  color: var(--la-ink-dim);
}

.soa-event-banner--la-sunset-skyline .soa-countdown {
  font-size: clamp(13px, 2.5cqw, 20px);
  font-weight: 800;
  color: var(--la-gold);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}

.soa-event-banner--la-sunset-skyline .soa-countdown.is-complete {
  color: var(--la-ink-dim);
  font-weight: 700;
}

.soa-event-banner--la-sunset-skyline .soa-countdown.is-error {
  font-size: clamp(11px, 1.8cqw, 14px);
  font-weight: 700;
  color: var(--la-ink-dim);
}

/* ---- フッター（地平線の上に重ねる） ---- */
.soa-event-banner--la-sunset-skyline .soa-event-banner__footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 16px;
  padding: clamp(6px, 1.1cqw, 10px) var(--la-pad-x);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 40%);
}

.soa-event-banner--la-sunset-skyline .soa-event-banner__date {
  font-size: clamp(11px, 1.8cqw, 15px);
  font-weight: 700;
}

.soa-event-banner--la-sunset-skyline .soa-event-banner__time {
  font-size: clamp(9px, 1.5cqw, 12px);
  color: var(--la-ink-dim);
}

/* ---- 半券（このバリアントでは使わない） ---- */
.soa-event-banner--la-sunset-skyline .soa-event-banner__aside,
.soa-event-banner--la-sunset-skyline .soa-event-banner__aside-label,
.soa-event-banner--la-sunset-skyline .soa-event-banner__aside-value,
.soa-event-banner--la-sunset-skyline .soa-event-banner__aside-meta,
.soa-event-banner--la-sunset-skyline .soa-event-banner__aside-date {
  display: none;
}

/*
 * ---- 結果記事（--result 修飾子・2026年9月4日改訂） ----
 * 大会が終わったら、同じバナーに soa-event-banner--result を足すだけで
 * 結果記事用になる。専用のバナーを新規に作らないこと。
 *
 * 設計意図：同じ風景の「数時間後」を描く。
 *   メインカードは現地時間の午後6時開始で、終わるのは午後9時ごろ。
 *   大会そのものが「日没から夜へ」の3時間なので、
 *     沈む陽（__sun）→ 三日月
 *     夕焼けの空      → 星の出た夜空（地平線に夕焼けの名残だけ残す）
 *     黒いビル影      → 窓に灯りの点いたビル影
 *   と変えると、プレビュー記事と同じ絵の続きになる。別物にしない。
 *
 *   月だけでは「暗くした昼」に見える。窓明かりと星が入ると夜になる。
 *   夜空は大会の1年後も正しいままなので、時間が経っても意味が壊れない。
 *
 * マークアップはプレビュー版と同一で、__sun / __skyline の中身も変えない
 * （記事側は class に --result を足し、カウントダウンを __result に差し替えるだけ）。
 */
.soa-event-banner--la-sunset-skyline.soa-event-banner--result {
  --la-night: #04030f;
  --la-dusk: #120d33;
  --la-magenta: #33204c;
  --la-glow: #5c3140;
  --la-gold: #f6ead0;
  --la-rule: rgba(246, 234, 208, .42);

  background:
    /* 星（上空45%あたりまで） */
    radial-gradient(1.5px 1.5px at 11% 13%, rgba(255, 255, 255, .95), transparent),
    radial-gradient(1.2px 1.2px at 27% 7%, rgba(255, 255, 255, .7), transparent),
    radial-gradient(1.6px 1.6px at 41% 19%, rgba(255, 255, 255, .85), transparent),
    radial-gradient(1.1px 1.1px at 58% 9%, rgba(255, 255, 255, .6), transparent),
    radial-gradient(1.5px 1.5px at 71% 22%, rgba(255, 255, 255, .9), transparent),
    radial-gradient(1.2px 1.2px at 83% 12%, rgba(255, 255, 255, .7), transparent),
    radial-gradient(1.4px 1.4px at 92% 27%, rgba(255, 255, 255, .8), transparent),
    radial-gradient(1.1px 1.1px at 19% 31%, rgba(255, 255, 255, .55), transparent),
    radial-gradient(1.3px 1.3px at 49% 35%, rgba(255, 255, 255, .6), transparent),
    radial-gradient(1.1px 1.1px at 64% 41%, rgba(255, 255, 255, .5), transparent),
    radial-gradient(1.4px 1.4px at 88% 44%, rgba(255, 255, 255, .55), transparent),
    linear-gradient(180deg,
      var(--la-night) 0%,
      var(--la-dusk) 46%,
      var(--la-magenta) 76%,
      var(--la-glow) 100%);
}

/*
 * 沈む陽 → 三日月。
 * 背景を透明にして inset の box-shadow で塗ると、欠けた側が本当に抜けるので
 * 背景のグラデーションがそのまま透ける（不透明な円を重ねる方式だと丸い継ぎ目が出る）。
 * 陽より小さく、高い位置に置く。時間が経ったことが位置と大きさで伝わる。
 */
.soa-event-banner--la-sunset-skyline.soa-event-banner--result .soa-event-banner__sun {
  width: clamp(58px, 11.5cqw, 92px);
  bottom: clamp(96px, 17cqw, 148px);
  margin-left: clamp(-46px, -5.75cqw, -29px);
  opacity: 1;
  background: transparent;
  box-shadow:
    inset clamp(-30px, -3.8cqw, -19px) 0 0 0 var(--la-gold),
    0 0 clamp(20px, 3.4cqw, 34px) rgba(246, 234, 208, .3);
}

/* 夜のスカイライン。ビルの輪郭は同じで、窓にだけ灯りが点く。 */
.soa-event-banner--la-sunset-skyline.soa-event-banner--result .soa-event-banner__skyline {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 160'%3E%3Cg fill='%23000'%3E%3Cpath d='M44 160 C40 118 39 86 45 58 L58 58 C52 86 56 118 61 160 Z'/%3E%3Cpath d='M51 58 C33 42 15 38 1 44 C15 47 33 52 52 66 Z'/%3E%3Cpath d='M51 58 C69 42 87 38 101 44 C87 47 69 52 50 66 Z'/%3E%3Cpath d='M51 58 C38 36 31 18 32 1 C41 19 47 39 56 60 Z'/%3E%3Cpath d='M51 58 C64 36 71 18 70 1 C61 19 55 39 46 60 Z'/%3E%3Cpath d='M51 61 C33 57 14 62 0 76 C17 65 34 62 52 69 Z'/%3E%3Cpath d='M51 61 C69 57 88 62 102 76 C85 65 68 62 50 69 Z'/%3E%3Ccircle cx='51' cy='60' r='7'/%3E%3C/g%3E%3C/svg%3E") left bottom / auto 116% no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 160'%3E%3Cg fill='%23000'%3E%3Cpath d='M44 160 C40 118 39 86 45 58 L58 58 C52 86 56 118 61 160 Z'/%3E%3Cpath d='M51 58 C33 42 15 38 1 44 C15 47 33 52 52 66 Z'/%3E%3Cpath d='M51 58 C69 42 87 38 101 44 C87 47 69 52 50 66 Z'/%3E%3Cpath d='M51 58 C38 36 31 18 32 1 C41 19 47 39 56 60 Z'/%3E%3Cpath d='M51 58 C64 36 71 18 70 1 C61 19 55 39 46 60 Z'/%3E%3Cpath d='M51 61 C33 57 14 62 0 76 C17 65 34 62 52 69 Z'/%3E%3Cpath d='M51 61 C69 57 88 62 102 76 C85 65 68 62 50 69 Z'/%3E%3Ccircle cx='51' cy='60' r='7'/%3E%3C/g%3E%3C/svg%3E") right bottom / auto 132% no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cg fill='%23000'%3E%3Crect x='0' y='52' width='36' height='48'/%3E%3Crect x='40' y='34' width='26' height='66'/%3E%3Crect x='70' y='62' width='42' height='38'/%3E%3Crect x='116' y='18' width='24' height='82'/%3E%3Crect x='124' y='6' width='8' height='14'/%3E%3Crect x='144' y='46' width='30' height='54'/%3E%3Crect x='178' y='28' width='18' height='72'/%3E%3Crect x='200' y='58' width='46' height='42'/%3E%3Crect x='250' y='38' width='24' height='62'/%3E%3Crect x='278' y='66' width='36' height='34'/%3E%3Crect x='318' y='48' width='28' height='52'/%3E%3Crect x='350' y='26' width='20' height='74'/%3E%3Crect x='374' y='58' width='26' height='42'/%3E%3C/g%3E%3Cg fill='%23ffd9a0'%3E%3Crect x='7' y='60' width='4' height='5'/%3E%3Crect x='20' y='60' width='4' height='5'/%3E%3Crect x='13' y='75' width='4' height='5'/%3E%3Crect x='45' y='42' width='4' height='5'/%3E%3Crect x='56' y='42' width='4' height='5'/%3E%3Crect x='45' y='59' width='4' height='5'/%3E%3Crect x='56' y='76' width='4' height='5'/%3E%3Crect x='78' y='70' width='4' height='5'/%3E%3Crect x='92' y='70' width='4' height='5'/%3E%3Crect x='78' y='85' width='4' height='5'/%3E%3Crect x='121' y='26' width='4' height='5'/%3E%3Crect x='131' y='26' width='4' height='5'/%3E%3Crect x='121' y='45' width='4' height='5'/%3E%3Crect x='131' y='63' width='4' height='5'/%3E%3Crect x='121' y='81' width='4' height='5'/%3E%3Crect x='150' y='54' width='4' height='5'/%3E%3Crect x='162' y='54' width='4' height='5'/%3E%3Crect x='150' y='73' width='4' height='5'/%3E%3Crect x='183' y='36' width='4' height='5'/%3E%3Crect x='183' y='55' width='4' height='5'/%3E%3Crect x='183' y='75' width='4' height='5'/%3E%3Crect x='208' y='66' width='4' height='5'/%3E%3Crect x='222' y='66' width='4' height='5'/%3E%3Crect x='236' y='66' width='4' height='5'/%3E%3Crect x='208' y='83' width='4' height='5'/%3E%3Crect x='255' y='46' width='4' height='5'/%3E%3Crect x='265' y='46' width='4' height='5'/%3E%3Crect x='255' y='65' width='4' height='5'/%3E%3Crect x='265' y='83' width='4' height='5'/%3E%3Crect x='285' y='74' width='4' height='5'/%3E%3Crect x='298' y='74' width='4' height='5'/%3E%3Crect x='324' y='56' width='4' height='5'/%3E%3Crect x='336' y='56' width='4' height='5'/%3E%3Crect x='324' y='75' width='4' height='5'/%3E%3Crect x='355' y='34' width='4' height='5'/%3E%3Crect x='355' y='53' width='4' height='5'/%3E%3Crect x='355' y='73' width='4' height='5'/%3E%3Crect x='380' y='66' width='4' height='5'/%3E%3Crect x='391' y='66' width='4' height='5'/%3E%3Crect x='380' y='83' width='4' height='5'/%3E%3C/g%3E%3C/svg%3E") center bottom / 100% 74% no-repeat;
}

.soa-event-banner--la-sunset-skyline .soa-event-banner__result {
  display: inline-block;
  padding: clamp(3px, .6cqw, 6px) clamp(9px, 1.7cqw, 15px);
  border: 1px solid var(--la-rule);
  border-radius: 3px;
  background: rgba(0, 0, 0, .34);
  font-size: clamp(13px, 2.5cqw, 20px);
  font-weight: 800;
  color: var(--la-gold);
}

/* ---- レスポンシブ ---- */
@media (max-width: 680px) {
  .soa-event-banner--la-sunset-skyline {
    min-height: 0;
    --la-pad-bottom: clamp(44px, 15cqw, 62px);
    --la-skyline-h: clamp(56px, 19cqw, 78px);
  }

  .soa-event-banner--la-sunset-skyline .soa-event-banner__sun {
    bottom: clamp(40px, 14cqw, 58px);
    width: clamp(80px, 28cqw, 118px);
    margin-left: clamp(-59px, -14cqw, -40px);
  }

  .soa-event-banner--la-sunset-skyline .soa-event-banner__footer {
    flex-direction: column;
    gap: 1px;
  }

  /*
   * 結果記事の三日月は、狭い幅だと決着帯（__result）と重なる。
   * 陽は大きくぼやけているので背後に回っても気にならないが、月は輪郭が出るため
   * 高く・右へ寄せて逃がす。上の --result の指定は詳細度が (0,3,0) で
   * メディアクエリの外にあり、ここで打ち消さないとデスクトップの位置のまま残る。
   */
  .soa-event-banner--la-sunset-skyline.soa-event-banner--result .soa-event-banner__sun {
    left: 76%;
    width: clamp(46px, 13cqw, 66px);
    bottom: clamp(84px, 24cqw, 120px);
    margin-left: clamp(-33px, -6.5cqw, -23px);
  }
}

@media (max-width: 430px) {
  .soa-event-banner--la-sunset-skyline {
    --la-pad-x: 13px;
    --la-pad-top: 12px;
    --la-pad-bottom: 42px;
    --la-skyline-h: 52px;
  }

  .soa-event-banner--la-sunset-skyline .soa-event-banner__label {
    letter-spacing: .18em;
  }

  .soa-event-banner--la-sunset-skyline .soa-event-banner__sun {
    bottom: 38px;
    width: 76px;
    margin-left: -38px;
  }

  .soa-event-banner--la-sunset-skyline .soa-event-banner__body {
    gap: 3px;
  }

  .soa-event-banner--la-sunset-skyline.soa-event-banner--result .soa-event-banner__sun {
    left: 78%;
    width: 42px;
    bottom: 78px;
    margin-left: -21px;
  }
}