/* ================================================
   HASEUL KIM Portfolio — style.css
   日本語版 / Japanese
   ================================================ */


/* ------------------------------------------------
   Google Fonts インポート
   ------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Anonymous+Pro&display=swap');


/* ------------------------------------------------
   Design Tokens（CSS変数）
   Figma の Variables をそのまま反映
   ------------------------------------------------ */
:root {

  /* --- カラー：共通 --- */
  --color-bg-dark:          #19181B;
  --color-text-white:       #FFFFFF;
  --color-text-primary:     #0D0D0D;
  --color-divider-gray:     #999999;

  /* --- カラー：KATCHプロジェクト --- */
  --color-katch-primary:    #264039;
  --color-katch-secondary:  rgba(38, 64, 57, 0.65);
  --color-katch-badge-bg:   rgba(115, 171, 157, 0.2);
  --color-katch-bg-main:    #F2FAF8;

  /* --- カラー：ticketプロジェクト --- */
  --color-ticket-bg-main:   #26282B;   /* セクション・カード背景 */
  --color-ticket-bg-page:   #131416;   /* ページ背景 */
  --color-ticket-bg-wrapup: #EDEDED;   /* 振り返りセクション背景 */
  --color-ticket-primary:   #FFFFFF;
  --color-ticket-secondary: rgba(255, 255, 255, 0.7);
  --color-ticket-badge-bg:  rgba(255, 255, 255, 0.15);

  /* --- カラー：ボタン --- */
  --color-download-bg:      rgba(0, 0, 0, 0.65);

  /* --- フォント --- */
  --font-helvetica:     'Helvetica Neue', Helvetica, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --font-anonymous-pro: 'Anonymous Pro', monospace;

  /* --- タイポグラフィ：PC --- */
  --size-pc-heading-large:   48px;
  --lh-pc-heading-large:     72px;
  --size-pc-heading-medium:  36px;
  --lh-pc-heading-medium:    56px;
  --size-pc-heading-small:   28px;
  --lh-pc-heading-small:     40px;
  --size-pc-heading-xsmall:  20px;
  --lh-pc-heading-xsmall:    32px;
  --size-pc-body:            16px;
  --lh-pc-body:              24px;
  --size-pc-caption:         14px;
  --lh-pc-caption:           20px;

  /* --- タイポグラフィ：SP --- */
  --size-sp-heading-large:   28px;
  --lh-sp-heading-large:     40px;
  --size-sp-heading-medium:  24px;
  --lh-sp-heading-medium:    36px;
  --size-sp-body:            14px;
  --lh-sp-body:              24px;
  --size-sp-caption:         11px;
  --lh-sp-caption:           16px;

  /* --- スペーシング --- */
  --sp-gap-s:    4px;
  --sp-gap-m:    8px;
  --sp-gap-l:    16px;
  --sp-gap-xl:   24px;
  --sp-gap-xxxl: 48px;

  /* --- パディング：PC --- */
  --sp-pad-nav-h-pc:        80px;
  --sp-pad-nav-v-pc:        48px;
  --sp-pad-intro-pc:        120px;
  --sp-pad-content-pc:      80px;
  --sp-pad-container-h-pc:  240px;  /* section container 横 */
  --sp-pad-container-v-pc:  120px;  /* section container 縦 */

  /* --- パディング：SP --- */
  --sp-pad-h-sp: 16px;
  --sp-pad-v-sp: 48px;

  /* --- ボーダーラジアス --- */
  --radius-s: 4px;
  --radius-m: 8px;

  /* --- アイコン --- */
  --size-icon-sm: 16px;
}


/* ------------------------------------------------
   Reset & Base
   ------------------------------------------------ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  background-color: #FFFFFF;
  color: var(--color-text-primary);
  font-family: var(--font-helvetica);
  min-height: 100vh;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

p {
  letter-spacing: 0;
}


/* ================================================
   PAGE FADE-IN — 상세 페이지 등장 애니메이션
   ================================================ */
@keyframes page-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body:not(.theme--home) {
  animation: page-fade-in 0.8s ease forwards;
}


/* ================================================
   COMPONENTS（共通部品）
   ================================================ */

/* ------------------------------------------------
   Badge（バッジ）
   ------------------------------------------------ */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  padding: 4px 8px;
  border-radius: var(--radius-s);
  font-family: var(--font-helvetica);
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
  flex-shrink: 0;
}

.badge--katch {
  background-color: var(--color-katch-badge-bg);
  font-size: var(--size-pc-caption);
  line-height: var(--lh-pc-caption);
  color: var(--color-katch-secondary);
}

/* ------------------------------------------------
   Download Button（ダウンロードボタン）
   ------------------------------------------------ */
.btn-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 4px 16px;
  background-color: var(--color-download-bg);
  border-radius: var(--radius-s);
  font-family: var(--font-helvetica);
  font-size: var(--size-pc-caption);
  font-weight: 700;
  line-height: var(--lh-pc-caption);
  color: var(--color-text-white);
  white-space: nowrap;
  letter-spacing: 0;
  flex-shrink: 0;
}

.btn-download img {
  display: inline-block;
  flex-shrink: 0;
}

/* ライトテーマ（Collecting Forest等）: 半透明白背景 + ダークテキスト */
.btn-download--light {
  background-color: rgba(255, 255, 255, 0.65);
  color: rgba(28, 28, 28, 0.7);
}


/* ================================================
   LAYOUT — ページ共通
   ================================================ */

/* ------------------------------------------------
   Navigation Header（サイトヘッダー）
   ※ デザイン完成後に追加予定
   ------------------------------------------------ */


/* ================================================
   SECTION — Intro 共通クラス
   色はkatchをデフォルトとし、theme--ticketでオーバーライド
   ================================================ */
.intro {
  padding: 120px var(--sp-pad-intro-pc) 0;
}

.intro__section {
  display: flex;
  align-items: stretch;
  border-radius: 16px;
  overflow: hidden;
}

.intro__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--sp-pad-intro-pc) var(--sp-pad-content-pc);
}

.intro__spacer {
  flex: 1;
  min-height: 96px;
}

.intro__heading {
  display: flex;
  flex-direction: column;
  gap: var(--sp-gap-xl);
  color: var(--color-katch-primary);
}

.intro__title {
  font-family: var(--font-helvetica);
  font-size: var(--size-pc-heading-large);
  font-weight: 700;
  line-height: var(--lh-pc-heading-large);
  letter-spacing: 0;
  color: var(--color-katch-primary);
}

.intro__desc {
  font-family: var(--font-helvetica);
  font-size: var(--size-pc-body);
  font-weight: 400;
  line-height: var(--lh-pc-body);
  color: var(--color-katch-primary);
  letter-spacing: 0;
}

.intro__details {
  display: flex;
  flex-direction: column;
  gap: var(--sp-gap-xl);
}

.intro__detail-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-gap-m);
}

.intro__detail-text {
  font-family: var(--font-helvetica);
  font-size: var(--size-pc-body);
  font-weight: 400;
  line-height: var(--lh-pc-body);
  color: var(--color-katch-secondary);
  letter-spacing: 0;
  white-space: nowrap;
}

.intro__detail-text p + p {
  margin-top: 2px;
}

.intro__download {
  display: flex;
  gap: var(--sp-gap-l);
  align-items: center;
  flex-wrap: wrap;
}

.intro__mv {
  flex: 1;
  overflow: hidden;
}

.intro__mv img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ================================================
   Responsive — Intro 共通 SP
   ================================================ */
@media (max-width: 768px) {

  .intro {
    padding: 0;
  }

  .intro__section {
    flex-direction: column;
    border-radius: 0;
    height: auto;
    min-height: auto;
  }

  .intro__mv {
    order: -1;
    flex: none;
    width: 100%;
    overflow: hidden;
  }

  .intro__mv img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .intro__content {
    flex: none;
    padding: var(--sp-pad-v-sp) var(--sp-pad-h-sp);
    gap: 48px;
    justify-content: flex-start;
  }

  .intro__spacer {
    display: none;
  }

  .intro__heading {
    gap: var(--sp-gap-m);
  }

  .intro__title {
    font-size: var(--size-sp-heading-large);
    line-height: var(--lh-sp-heading-large);
  }

  .intro__desc {
    font-size: var(--size-sp-body);
    line-height: var(--lh-sp-body);
  }

  .intro__detail-text {
    font-size: var(--size-sp-body);
    line-height: var(--lh-sp-body);
    white-space: normal;
  }

}


/* ================================================
   SECTION — Mission 共通クラス
   背景色はプロジェクトごとにオーバーライド
   ================================================ */
.mission {
  padding: var(--sp-pad-container-v-pc) var(--sp-pad-container-h-pc);
}

/* ================================================
   Responsive — Mission 共通 SP
   ================================================ */
@media (max-width: 768px) {

  .mission {
    padding: var(--sp-pad-v-sp) var(--sp-pad-h-sp);
  }

  .mission .section__heading-block { gap: var(--sp-gap-l); }

  .mission .section__heading-medium {
    font-size: var(--size-sp-heading-medium);
    line-height: var(--lh-sp-heading-medium);
  }

  .mission br { display: none; }

  .mission .section__body {
    font-size: var(--size-sp-body);
    line-height: var(--lh-sp-body);
  }

}


/* ================================================
   SECTION — Overview 共通クラス
   色はkatchをデフォルトとし、theme--ticketでオーバーライド
   ================================================ */
.overview {
  padding: var(--sp-pad-container-v-pc) var(--sp-pad-container-h-pc);
  display: flex;
  flex-direction: column;
  gap: 96px;
}

/* --- 見出しブロック --- */
.section__heading-block {
  display: flex;
  flex-direction: column;
  gap: var(--sp-gap-xl);
}

.section__heading-title {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.section__label {
  font-family: var(--font-helvetica);
  font-size: var(--size-pc-body);
  font-weight: 700;
  line-height: var(--lh-pc-body);
  color: var(--color-katch-secondary);
  letter-spacing: 0;
}

.section__heading-medium {
  font-family: var(--font-helvetica);
  font-size: var(--size-pc-heading-medium);
  font-weight: 700;
  line-height: var(--lh-pc-heading-medium);
  color: var(--color-katch-primary);
  letter-spacing: 0;
}

.section__heading-small {
  font-family: var(--font-helvetica);
  font-size: var(--size-pc-heading-small);
  font-weight: 700;
  line-height: var(--lh-pc-heading-small);
  color: var(--color-katch-primary);
  letter-spacing: 0;
}

.section__body {
  font-family: var(--font-helvetica);
  font-size: var(--size-pc-body);
  font-weight: 400;
  line-height: var(--lh-pc-body);
  color: var(--color-katch-primary);
  letter-spacing: 0;
}

/* --- インデントリスト --- */
.section__indent {
  display: flex;
  gap: var(--sp-gap-l);
  align-items: stretch;
}

.section__indent-bar {
  width: 4px;
  flex-shrink: 0;
  background-color: var(--color-katch-badge-bg);
  align-self: stretch;
}

.section__indent-items {
  display: flex;
  flex-direction: column;
  gap: var(--sp-gap-xl);
}

.section__indent-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-gap-m);
}

.section__indent-label {
  font-family: var(--font-helvetica);
  font-size: var(--size-pc-body);
  font-weight: 700;
  line-height: var(--lh-pc-body);
  color: var(--color-katch-primary);
  letter-spacing: 0;
}

.section__indent-text {
  font-family: var(--font-helvetica);
  font-size: var(--size-pc-body);
  font-weight: 400;
  line-height: var(--lh-pc-body);
  color: var(--color-katch-primary);
  letter-spacing: 0;
}

/* --- 불릿 리스트 (インデント内) --- */
.section__bullet-items {
  font-family: var(--font-helvetica);
  font-size: var(--size-pc-body);
  font-weight: 400;
  line-height: var(--lh-pc-body);
  color: var(--color-katch-primary);
  letter-spacing: 0;
}

.section__bullet-items ul {
  list-style: disc;
  padding-left: 24px;
}

/* ================================================
   Responsive — Overview 共通 SP
   ================================================ */
@media (max-width: 768px) {

  .overview {
    padding: var(--sp-pad-v-sp) var(--sp-pad-h-sp);
    gap: var(--sp-gap-xxxl);
  }

  .section__heading-block { gap: var(--sp-gap-l); }

  .section__heading-title { gap: 4px; }
  .section__label {
    font-size: var(--size-sp-caption);
    line-height: var(--lh-sp-caption);
  }

  .section__heading-medium {
    font-size: var(--size-sp-heading-medium);
    line-height: var(--lh-sp-heading-medium);
  }

  .section__heading-small {
    font-size: var(--size-sp-body);
    line-height: var(--lh-sp-body);
    font-weight: 700;
  }

  .section__body {
    font-size: var(--size-sp-body);
    line-height: var(--lh-sp-body);
  }

  .section__indent-bar { width: 2px; }

  .section__indent-items { gap: var(--sp-gap-l); }

  .section__indent-label {
    font-size: var(--size-pc-body);
    line-height: var(--lh-pc-body);
  }

  .section__indent-text {
    font-size: var(--size-sp-body);
    line-height: var(--lh-sp-body);
  }

  .section__bullet-items {
    font-size: var(--size-sp-body);
    line-height: var(--lh-sp-body);
  }

}




/* ================================================
   NAVIGATION BOTTOM（固定ナビゲーション）
   ================================================ */
.nav-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 48px 80px;
  pointer-events: none;    /* 背景クリックを透過 */
}

/* ボタングループ（pill） */
.nav-bottom__group {
  display: flex;
  align-items: center;
  height: 48px;
  background-color: rgba(28, 28, 28, 0.5);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-radius: 999px;
  pointer-events: auto;
  flex-shrink: 0;
}

/* 各ボタン */
.nav-bottom__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  background-color: transparent;
  font-family: var(--font-helvetica);
  font-size: var(--size-pc-body);
  font-weight: 400;
  line-height: var(--lh-pc-body);
  color: var(--color-text-white);
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: none;
  outline: none;
}

/* hover: overlay #000000 60% */
.nav-bottom__btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 999px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

@media (hover: hover) {
  .nav-bottom__btn:hover::after {
    opacity: 1;
  }
}

/* アクティブボタン（現在のセクション） */
.nav-bottom__btn.is-active {
  font-weight: 700;
}

/* フェードアウト（下へ） / フェードイン（上から） */
.nav-bottom {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.nav-bottom.is-hidden {
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
}
.nav-bottom__home {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background-color: rgba(28, 28, 28, 0.5);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-radius: 999px;
  pointer-events: auto;
  flex-shrink: 0;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.nav-bottom__home:hover {
  background-color: rgba(28, 28, 28, 0.7);
}

.nav-bottom__home-icon {
  width: 24px;
  height: 24px;
  display: block;
}

/* グラデーション: PC非表示 */
.nav-bottom__gradient {
  display: none;
}


/* ================================================
   Responsive — Nav Bottom SP
   ================================================ */
@media (max-width: 768px) {

  .nav-bottom {
    padding: 8px 16px;
    justify-content: flex-start;
    gap: 8px;
  }

  /* SP: グループを横スクロール */
  .nav-bottom__group {
    flex: 1;
    min-width: 0;
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .nav-bottom__group::-webkit-scrollbar {
    display: none;
  }

  /* SP: ボタンは自然な幅で表示 */
  .nav-bottom__btn {
    flex: 0 0 auto;
    font-size: var(--size-sp-body);
    line-height: var(--lh-sp-body);
    padding: 0 24px;
    white-space: nowrap;
    overflow: visible;
    text-overflow: unset;
  }

  /* SP: グラデーション（表示） */
  .nav-bottom__gradient {
    display: block;
    position: absolute;
    top: 0;
    width: 48px;
    height: 48px;
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.2s ease;
  }

  .nav-bottom__gradient--right {
    right: 0;
    background: linear-gradient(to left, rgba(28, 28, 28, 0.3), rgba(28, 28, 28, 0));
    border-radius: 0 999px 999px 0;
  }

  .nav-bottom__gradient--left {
    left: 0;
    background: linear-gradient(to right, rgba(28, 28, 28, 0.3), rgba(28, 28, 28, 0));
    border-radius: 999px 0 0 999px;
    opacity: 0;
  }

}

/* ================================================
   PORTFOLIO FOOTER — footer.css
   全プロジェクトページ共通フッター
   ================================================ */


/* ================================================
   FOOTER — レイアウト
   ================================================ */
.pf-footer {
  background-color: #FAFAFA;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 64px;
  padding: 100px 160px;
  box-sizing: border-box;
  width: 100%;
}

/* 左: title + resume（flex: 1、下揃え） */
.pf-footer__left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-gap-xl);
  align-self: flex-end;
  order: 1;
}

.pf-footer__title {
  font-family: var(--font-anonymous-pro);
  font-size: var(--size-pc-body);
  line-height: var(--lh-pc-body);
  color: #1C1C1C;
  text-decoration: none;
  white-space: nowrap;
}

.pf-footer__resume {
  display: flex;
  align-items: center;
  gap: var(--sp-gap-s);
  font-family: var(--font-anonymous-pro);
  font-size: var(--size-pc-body);
  line-height: var(--lh-pc-body);
  color: #1C1C1C;
  opacity: 0.5;
  text-decoration: none;
  white-space: nowrap;
}

.pf-footer__resume-icon {
  width: 16px;
  height: 16px;
  display: block;
  flex-shrink: 0;
}

/* 右: Next Project label + card（PC: 横並び） */
.pf-footer__right {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 64px;
  flex-shrink: 0;
  order: 2;
}

.pf-footer__next-label {
  font-family: var(--font-anonymous-pro);
  font-size: var(--size-pc-body);
  line-height: var(--lh-pc-body);
  color: #1C1C1C;
  white-space: nowrap;
  text-align: right;
}


/* ================================================
   CARD PROJECT — フッター内カード
   ================================================ */
.pf-footer__card {
  display: block;
  width: 630px;
  aspect-ratio: 1 / 1;
  background-color: #FFFFFF;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  text-decoration: none;
  flex-shrink: 0;
}

.pf-footer__card-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter 0.3s ease;
}

.pf-footer__card:hover .pf-footer__card-image {
  filter: grayscale(1) blur(4px);
}

.pf-footer__card-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(19, 20, 22, 0.5);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.pf-footer__card:hover .pf-footer__card-overlay {
  opacity: 1;
}

.pf-footer__card-info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-gap-l);
  color: #FFFFFF;
}

.pf-footer__card-heading {
  display: flex;
  flex-direction: column;
  gap: var(--sp-gap-s);
}

.pf-footer__card-category {
  font-family: var(--font-helvetica);
  font-size: var(--size-pc-caption);
  font-weight: 400;
  line-height: var(--lh-pc-caption);
  letter-spacing: 0;
  opacity: 0.5;
}

.pf-footer__card-title {
  font-family: var(--font-helvetica);
  font-size: var(--size-pc-heading-xsmall);
  font-weight: 700;
  line-height: var(--lh-pc-heading-xsmall);
  letter-spacing: 0;
}

.pf-footer__card-desc {
  font-family: var(--font-helvetica);
  font-size: var(--size-pc-body);
  font-weight: 400;
  line-height: var(--lh-pc-body);
  letter-spacing: 0;
}

.pf-footer__card-date {
  font-family: var(--font-helvetica);
  font-size: var(--size-pc-body);
  font-weight: 400;
  line-height: var(--lh-pc-body);
  letter-spacing: 0;
}


/* ================================================
   Responsive — Footer SP
   ================================================ */
@media (max-width: 768px) {

  .pf-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-gap-xxxl);
    padding: var(--sp-pad-v-sp) var(--sp-pad-h-sp);
  }

  /* SP: 上: Next Project + card */
  .pf-footer__right {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-gap-l);
    width: 100%;
    order: 1;
  }

  .pf-footer__card {
    width: 100%;
  }

  /* SP: 下: title + resume */
  .pf-footer__left {
    gap: var(--sp-gap-xl);
    align-self: auto;
    order: 2;
  }

  .pf-footer__title {
    font-size: var(--size-sp-body);
    line-height: var(--lh-sp-body);
  }

  .pf-footer__resume {
    font-size: var(--size-sp-body);
    line-height: var(--lh-sp-body);
  }

  .pf-footer__next-label {
    font-size: var(--size-sp-body);
    line-height: var(--lh-sp-body);
  }

  .pf-footer__card-overlay {
    padding: 24px;
  }

  .pf-footer__card-info {
    gap: var(--sp-gap-m);
  }

  .pf-footer__card-category {
    font-size: var(--size-sp-caption);
    line-height: var(--lh-sp-caption);
  }

  .pf-footer__card-title {
    font-size: var(--size-sp-body);
    font-weight: 700;
    line-height: var(--lh-sp-body);
  }

  .pf-footer__card-desc {
    font-size: var(--size-sp-body);
    line-height: var(--lh-sp-body);
  }

  .pf-footer__card-date {
    font-size: var(--size-sp-body);
    line-height: var(--lh-sp-body);
  }

}


/* ================================================
   MARQUEE — 共通スタイル
   ================================================ */
.marquee {
  overflow: hidden;
  padding: 120px 0;
}

.marquee__track {
  display: flex;
  gap: 40px;
  width: max-content;
  animation: marquee-scroll 60s linear infinite;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

.marquee__item {
  width: 300px;
  height: auto;
  display: block;
  flex-shrink: 0;
}

@keyframes marquee-scroll {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

@media (max-width: 768px) {

  .marquee {
    padding: 48px 0;
  }

  .marquee__track {
    gap: 20px;
  }

  .marquee__item {
    width: 130px;
  }

}