/* ==========================================================================
   TRES LOCOS – HAUPTSTYLESHEET

   Inhaltsverzeichnis:    01. Farben und Grundeinstellungen
   02. Navigation
   03. Wiederverwendbare Elemente
   04. Startseite
   05. Footer
   06. Branding und Parallax
   07. Unterseiten
   08. Responsive Design

   Tipp: Die wichtigsten Farben werden direkt unten als CSS-Variablen
   definiert. Eine Farbänderung muss dadurch nur einmal vorgenommen werden.
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. Farben und Grundeinstellungen
   -------------------------------------------------------------------------- */
:root {
  --ink: #0d0d0d;
  --paper: #f1eadc;
  --orange: #e9952f;
  --muted: #b9b0a1;
  --line: rgba(241,234,220,.18)
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: Inter,system-ui,sans-serif
}

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

/* --------------------------------------------------------------------------
   02. Navigation – Grundlayout
   Die endgültige Fixierung befindet sich am Ende dieses Stylesheets.
   -------------------------------------------------------------------------- */
.nav {
  height: 88px;
  padding: 0 clamp(24px,5vw,76px);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: absolute;
  z-index: 5;
  width: 100%
}

.brand img {
  width: 56px;
  height: 66px;
  object-fit: contain
}

.nav nav {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em
}

.nav-cta {
  border: 1px solid var(--orange);
  padding: 12px 17px;
  color: var(--orange)
}

/* --------------------------------------------------------------------------
   04. Startseite – Titelbereich
   -------------------------------------------------------------------------- */
.hero {
  min-height: 100svh;
  padding: 150px clamp(24px,7vw,110px) 70px;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 78% 47%,#2a1b0f 0,transparent 33%),linear-gradient(135deg,#111 0,#080808 80%)
}

.hero-noise {
  position: absolute;
  inset: 0;
  opacity: .12;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")
}

.hero-copy,.hero-mark {
  position: relative;
  z-index: 1
}

.eyebrow {
  font-family: 'Barlow Condensed',sans-serif;
  color: var(--orange);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase
}

.hero h1,.section-head h2,.statement h2,.process h2,.inquiry h2 {
  font-family: 'Barlow Condensed',sans-serif;
  text-transform: uppercase;
  font-style: italic;
  font-weight: 800;
  line-height: .82;
  letter-spacing: -.04em;
  margin: 22px 0
}

.hero h1 {
  font-size: clamp(74px,11vw,168px)
}

.hero h1 span {
  color: var(--orange)
}

.lead {
  font-size: clamp(17px,2vw,22px);
  line-height: 1.55;
  max-width: 600px;
  color: #d2cabd
}

.hero-actions {
  display: flex;
  gap: 12px;
  margin-top: 36px
}

.button {
  appearance: none;
  border: 0;
  font: 700 13px Inter,sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 17px 22px;
  display: inline-block;
  cursor: pointer
}

.primary {
  background: var(--orange);
  color: var(--ink)
}

.ghost {
  border: 1px solid #555
}

.hero-mark {
  justify-self: center;
  width: min(420px,38vw);
  aspect-ratio: 1/1.12;
  border: 3px solid var(--orange);
  clip-path: polygon(50% 0,94% 22%,94% 76%,50% 100%,6% 76%,6% 22%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--orange);
  transform: rotate(2deg)
}

.hero-mark:before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 2px dashed var(--orange);
  clip-path: inherit
}

.hero-mark p {
  font: italic 800 clamp(54px,7vw,92px)/.75 'Barlow Condensed';
  letter-spacing: -.05em;
  margin: 20px 0 12px;
  transform: rotate(-4deg)
}

.hero-mark small {
  font: 700 13px Inter;
  letter-spacing: .25em
}

.flame {
  display: inline-block;
  background: var(--orange);
  width: 38px;
  height: 85px;
  border-radius: 70% 10% 60% 45%;
  transform: rotate(25deg);
  margin: 0 8px
}

.f1,.f3 {
  height: 58px;
  width: 28px
}

.scroll-note {
  position: absolute;
  bottom: 28px;
  right: 5vw;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #857f76
}

.scroll-note span {
  color: var(--orange);
  font-size: 18px;
  margin-left: 10px
}

/* Startseite – Einleitung */
.statement {
  background: var(--paper);
  color: var(--ink);
  padding: clamp(80px,11vw,160px) clamp(24px,7vw,110px);
  display: grid;
  grid-template-columns: 70px 1.1fr .9fr;
  gap: 35px
}

.section-count {
  font: 700 13px Inter;
  color: var(--orange)
}

.eyebrow.dark {
  color: #a35b17
}

.statement h2,.inquiry h2 {
  font-size: clamp(60px,8vw,116px)
}

.statement-copy {
  padding-top: 55px;
  max-width: 520px
}

.statement-copy p {
  font-size: 18px;
  line-height: 1.65;
  margin: 0 0 24px;
  color: #383531
}

/* Startseite – Angebot */
.offer {
  padding: 120px clamp(24px,7vw,110px)
}

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 65px
}

.section-head h2 {
  font-size: clamp(60px,8vw,108px);
  margin: 0;
  text-align: right
}

.offer-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  border-top: 1px solid var(--line)
}

.offer article {
  padding: 45px 40px 55px 0;
  border-bottom: 1px solid var(--line)
}

.offer article+article {
  padding-left: 40px;
  border-left: 1px solid var(--line)
}

.offer article span {
  color: var(--orange);
  font: 700 12px Inter
}

.offer h3 {
  font: italic 700 34px 'Barlow Condensed';
  text-transform: uppercase;
  margin: 28px 0 14px
}

.offer article p {
  color: var(--muted);
  line-height: 1.65
}

/* Startseite – Ablauf */
.process {
  padding: 110px clamp(24px,7vw,110px);
  background: #181715;
  display: grid;
  grid-template-columns: 70px .9fr 1.1fr;
  gap: 35px
}

.section-count.light {
  color: var(--orange)
}

.process h2 {
  font-size: clamp(60px,8vw,110px)
}

.process ol {
  list-style: none;
  margin: 20px 0 0;
  padding: 0
}

.process li {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 20px;
  padding: 25px 0;
  border-bottom: 1px solid var(--line)
}

.process li b {
  font: italic 700 26px 'Barlow Condensed';
  text-transform: uppercase
}

.process li span {
  color: var(--muted);
  line-height: 1.5
}

/* Startseite – Zitatfläche */
.quote {
  min-height: 72vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: var(--orange);
  color: var(--ink);
  padding: 80px 24px
}

.quote blockquote {
  font: italic 800 clamp(65px,10vw,148px)/.8 'Barlow Condensed';
  text-transform: uppercase;
  margin: 30px 0;
  letter-spacing: -.04em
}

.brush-flames {
  display: flex;
  align-items: end;
  gap: 12px
}

.brush-flames i {
  display: block;
  background: var(--ink);
  width: 24px;
  height: 52px;
  border-radius: 80% 10% 55% 45%;
  transform: rotate(20deg)
}

.brush-flames i:nth-child(2) {
  height: 75px;
  width: 31px
}

.brush-flames i:nth-child(3) {
  transform: rotate(35deg)
}

/* Formulare und Anfragebereich */
.inquiry {
  background: var(--paper);
  color: var(--ink);
  padding: clamp(80px,10vw,140px) clamp(24px,7vw,110px);
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 9vw
}

.inquiry-intro>p:last-child {
  font-size: 18px;
  line-height: 1.65;
  max-width: 450px
}

.inquiry form {
  display: grid;
  gap: 22px
}

.inquiry label {
  font: 700 12px Inter;
  text-transform: uppercase;
  letter-spacing: .08em
}

.inquiry input,.inquiry textarea {
  display: block;
  width: 100%;
  margin-top: 9px;
  border: 0;
  border-bottom: 1px solid #9e9689;
  background: transparent;
  padding: 13px 2px;
  font: 16px Inter;
  color: var(--ink);
  border-radius: 0
}

.inquiry input:focus,.inquiry textarea:focus {
  outline: 0;
  border-color: var(--orange)
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px
}

.inquiry button {
  justify-self: start
}

.form-note {
  font-size: 12px;
  color: #746e65;
  line-height: 1.5
}

/* --------------------------------------------------------------------------
   05. Footer
   -------------------------------------------------------------------------- */
footer {
  padding: 48px clamp(24px,7vw,110px);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted)
}

.footer-brand {
  font: italic 800 26px 'Barlow Condensed';
  color: var(--orange)
}

footer div:last-child {
  display: flex;
  justify-content: end;
  gap: 25px
}

@media(max-width:850px) {
  .nav nav a:not(.nav-cta) {
    display: none
  }

  .hero {
    grid-template-columns: 1fr;
    padding-top: 130px
  }

  .hero-mark {
    position: absolute;
    right: -70px;
    top: 170px;
    width: 300px;
    opacity: .22
  }

  .hero-copy {
    max-width: 690px
  }

  .statement,.process {
    grid-template-columns: 1fr
  }

  .section-count {
    display: none
  }

  .statement-copy {
    padding-top: 0
  }

  .section-head {
    display: block
  }

  .section-head h2 {
    text-align: left;
    margin-top: 25px
  }

  .offer-grid {
    grid-template-columns: 1fr
  }

  .offer article+article {
    padding-left: 0;
    border-left: 0
  }

  .process ol {
    margin: 0
  }

  .inquiry {
    grid-template-columns: 1fr
  }

  .inquiry h2 {
    margin-bottom: 35px
  }

  footer {
    grid-template-columns: 1fr;
    gap: 16px
  }

  footer div:last-child {
    justify-content: start
  }

}

@media(max-width:520px) {
  .hero h1 {
    font-size: 74px
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    text-align: center
  }

  .process li {
    grid-template-columns: 1fr
  }

  .form-row {
    grid-template-columns: 1fr
  }

  .nav {
    height: 74px
  }

  .brand img {
    width: 45px
  }

  .nav-cta {
    padding: 10px 12px;
    font-size: 11px
  }

}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }

}

/* Vintage Tres Locos identity */
:root {
  --paper: #f5ecd8;
  --gold: #f5a623;
  --orange: #ef6a20;
  --orange-hover: #ffc46b;
  --red: #b72f1d;
  --muted: #c0b5a3
}

body:before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")
}

.visually-hidden {
  position: absolute!important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0
}

.nav {
  height: 96px;
  border-bottom: 1px solid rgba(245,236,216,.09)
}

.brand img {
  width: 58px;
  height: 58px
}

.nav-cta {
  border-color: var(--gold);
  color: var(--gold);
  transform: rotate(-1deg)
}

.hero {
  grid-template-columns: 1.25fr .55fr;
  background: radial-gradient(circle at 73% 44%,rgba(183,47,29,.22) 0,transparent 35%),linear-gradient(135deg,#15130f 0,#080808 78%)
}

.hero-logo {
  display: block;
  width: min(900px,74vw);
  max-height: 360px;
  object-fit: contain;
  object-position: left center;
  margin: 8px 0 18px;
  filter: drop-shadow(0 16px 28px rgba(0,0,0,.28))
}

.hero-logo,.hero-mark,.hero-noise {
  will-change: transform
}

.hero-logo {
  transform: translate3d(0,var(--logo-parallax,0),0)
}

.hero-mark {
  transform: translate3d(0,var(--mark-parallax,0),0) rotate(6deg)
}

.hero-noise {
  transform: translate3d(0,var(--noise-parallax,0),0) scale(1.08)
}

.eyebrow {
  color: var(--gold);
  letter-spacing: .18em
}

.primary {
  background: linear-gradient(135deg,var(--gold),var(--orange));
  box-shadow: 5px 5px 0 var(--red)
}

.hero-mark {
  border: 0;
  clip-path: none;
  width: min(250px,23vw);
  height: auto;
  aspect-ratio: auto;
  opacity: .13;
  transform: rotate(6deg)
}

.hero-mark:before {
  display: none
}

.hero-mark img {
  display: block;
  width: 100%;
  filter: drop-shadow(10px 10px 0 var(--red))
}

.section-head h2 em {
  color: var(--gold);
  font-style: inherit
}

.offer article {
  position: relative
}

.offer article:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 62px;
  height: 4px;
  background: linear-gradient(90deg,var(--gold),var(--orange));
  transform: rotate(-2deg)
}

.quote {
  background: linear-gradient(135deg,var(--gold),var(--orange) 55%,var(--red) 145%)
}

.quote-mark {
  width: 96px;
  filter: brightness(0);
  margin-bottom: 10px
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px
}

.footer-brand img {
  width: 42px;
  height: 34px;
  object-fit: contain
}

.footer-brand span {
  font: italic 800 26px 'Barlow Condensed';
  color: var(--gold)
}

@media(max-width:850px) {
  .hero {
    grid-template-columns: 1fr
  }

  .hero-logo {
    width: min(760px,92vw)
  }

  .hero-mark {
    right: -38px;
    top: auto;
    bottom: 70px;
    width: 210px
  }

  .quote-mark {
    width: 76px
  }

}

@media(max-width:520px) {
  .nav {
    height: 78px
  }

  .brand img {
    width: 44px;
    height: 44px
  }

  .hero {
    padding-top: 108px
  }

  .hero-logo {
    width: 100%;
    margin: 18px 0 16px
  }

  .lead {
    font-size: 16px
  }

  .hero-mark {
    width: 150px;
    bottom: 96px;
    right: -42px
  }

}

@media(prefers-reduced-motion:reduce) {
  .hero-logo,.hero-mark,.hero-noise {
    transform: none!important;
    will-change: auto
  }

}

.section-parallax {
  overflow: hidden
}

.section-parallax> :not(.hero-noise) {
  transform: translate3d(0,var(--section-parallax,0),0);
  will-change: transform
}

@media(prefers-reduced-motion:reduce) {
  .section-parallax> :not(.hero-noise) {
    transform: none!important;
    will-change: auto
  }

}

/* Multi-page navigation and SEO landing pages */
.menu-toggle {
  display: none;
  background: none;
  border: 0;
  color: var(--paper);
  width: 44px;
  height: 44px;
  padding: 9px;
  position: relative;
  z-index: 20
}

.menu-toggle span {
  display: block;
  height: 2px;
  background: currentColor;
  margin: 6px 0;
  transition: transform .25s ease,opacity .25s ease
}

.nav a[aria-current="page"]:not(.nav-cta) {
  color: var(--gold)
}

.nav nav a {
  transition: color .2s ease,border-color .2s ease
}

.nav nav a:hover, .nav nav a:focus-visible {
  color: var(--orange-hover)
}

.nav nav .nav-cta:hover, .nav nav .nav-cta:focus-visible {
  border-color: var(--orange-hover)
}

body a:not(.button):not(.brand):hover, body a:not(.button):not(.brand):focus-visible {
  color: var(--orange-hover)
}

.button {
  transition: transform .2s ease,filter .2s ease,box-shadow .2s ease
}

.button:hover, .button:focus-visible {
  filter: brightness(1.14);
  transform: translateY(-2px)
}

.subpage {
  padding-top: 96px
}

.page-hero {
  min-height: 68vh;
  padding: clamp(90px,12vw,170px) clamp(24px,7vw,110px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: radial-gradient(circle at 80% 30%,rgba(183,47,29,.2),transparent 38%),#0b0b0a;
  position: relative;
  overflow: hidden
}

.page-hero:after {
  content: "";
  position: absolute;
  width: 340px;
  height: 340px;
  right: 5vw;
  bottom: -120px;
  background: url('assets/tres-locos-stitch.svg') center/contain no-repeat;
  opacity: .055;
  transform: rotate(8deg)
}

.page-hero h1 {
  font: italic 800 clamp(70px,11vw,150px)/.82 'Barlow Condensed';
  text-transform: uppercase;
  letter-spacing: -.04em;
  margin: 20px 0 28px;
  max-width: 1050px
}

.page-hero>p:last-child {
  font-size: clamp(18px,2vw,23px);
  line-height: 1.6;
  color: #d2cabd;
  max-width: 760px
}

.content-grid {
  padding: clamp(80px,10vw,130px) clamp(24px,7vw,110px);
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1px;
  background: #26231f
}

.content-grid article {
  background: var(--ink);
  padding: 50px 38px;
  min-height: 330px
}

.content-grid article span {
  color: var(--gold);
  font-size: 12px;
  font-weight: 700
}

.content-grid h2,.values h2 {
  font: italic 800 clamp(34px,4vw,52px)/.92 'Barlow Condensed';
  text-transform: uppercase;
  margin: 54px 0 18px
}

.content-grid p,.values p {
  color: var(--muted);
  line-height: 1.7
}

.events-grid {
  grid-template-columns: repeat(2,1fr)
}

.split-section {
  padding: clamp(85px,10vw,140px) clamp(24px,7vw,110px);
  background: var(--paper);
  color: var(--ink);
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 9vw
}

.split-section h2 {
  font: italic 800 clamp(52px,7vw,96px)/.85 'Barlow Condensed';
  text-transform: uppercase;
  margin: 20px 0
}

.split-section>div:last-child {
  font-size: 18px;
  line-height: 1.75
}

.check-list {
  list-style: none;
  margin: 0 0 38px;
  padding: 0
}

.check-list li {
  padding: 17px 0 17px 32px;
  border-bottom: 1px solid #c7bcaa;
  position: relative
}

.check-list li:before {
  content: "✦";
  position: absolute;
  left: 0;
  color: #b72f1d
}

.page-cta {
  min-height: 56vh;
  padding: 90px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: linear-gradient(135deg,var(--gold),var(--orange) 60%,var(--red) 150%);
  color: var(--ink)
}

.page-cta h2 {
  font: italic 800 clamp(58px,9vw,130px)/.82 'Barlow Condensed';
  text-transform: uppercase;
  letter-spacing: -.04em;
  max-width: 1100px;
  margin: 20px 0 42px
}

.page-cta .primary {
  background: var(--ink);
  color: var(--paper);
  box-shadow: none
}

.page-process {
  grid-template-columns: .9fr 1.1fr
}

.page-process>div h2 {
  font: italic 800 clamp(55px,7vw,95px)/.85 'Barlow Condensed';
  text-transform: uppercase
}

.about-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 6vw
}

.about-hero img {
  width: 100%;
  filter: drop-shadow(0 20px 35px rgba(0,0,0,.25))
}

.about-copy p {
  margin-top: 0;
  margin-bottom: 22px
}

.values {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  padding: 100px clamp(24px,7vw,110px);
  gap: 50px
}

.contact-hero {
  min-height: 55vh
}

.contact-page {
  padding-top: 110px
}

.service-area {
  margin-top: 34px
}

.inquiry select {
  display: block;
  width: 100%;
  margin-top: 9px;
  border: 0;
  border-bottom: 1px solid #9e9689;
  background: transparent;
  padding: 13px 2px;
  font: 16px Inter;
  color: var(--ink);
  border-radius: 0
}

@media(max-width:950px) {
  .nav nav {
    gap: 19px
  }

  .content-grid {
    grid-template-columns: 1fr
  }

  .events-grid {
    grid-template-columns: 1fr
  }

  .content-grid article {
    min-height: 0
  }

  .split-section,.about-hero {
    grid-template-columns: 1fr
  }

  .about-hero img {
    max-width: 700px
  }

  .values {
    grid-template-columns: 1fr;
    gap: 10px
  }

}

@media(max-width:850px) {
  body.menu-open {
    overflow: hidden
  }

  .menu-toggle {
    display: block
  }

  .nav nav {
    display: flex;
    position: fixed;
    inset: 0;
    background: rgba(11,11,10,.98);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    transform: translateX(100%);
    transition: transform .3s ease;
    z-index: 15
  }

  .menu-open .nav nav {
    transform: translateX(0)
  }

  .nav nav a,.nav nav a:not(.nav-cta) {
    display: block;
    font: italic 800 40px 'Barlow Condensed';
    letter-spacing: .03em
  }

  .nav-cta {
    font-size: 22px!important;
    margin-top: 10px
  }

  .menu-open .menu-toggle span:nth-child(1) {
    transform: translateY(8px) rotate(45deg)
  }

  .menu-open .menu-toggle span:nth-child(2) {
    opacity: 0
  }

  .menu-open .menu-toggle span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg)
  }

  .subpage {
    padding-top: 78px
  }

  .page-hero {
    min-height: 62vh
  }

  .page-hero h1 {
    font-size: clamp(64px,17vw,110px)
  }

  .split-section {
    gap: 35px
  }

  .page-process {
    display: block
  }

  .page-process ol {
    margin-top: 40px
  }

}

/* Fixed site navigation */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(13,13,13,.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 28px rgba(0,0,0,.18)
}

.footer-brand img {
  width: 180px;
  height: auto;
  object-fit: contain
}

.footer-brand span {
  display: none
}

@media(max-width:520px) {
  .footer-brand img {
    width: 150px
  }

}