@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=DM+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --ink: #121515;
  --cream: #f0ede5;
  --white: #fff;
  --orange: #d72e20;
  --green: #171a1a;
  --muted: #68706c;
  --red: #d72e20
}

html {
  scroll-padding-top: 80px
}

body {
  font-family: "DM Sans", Arial, sans-serif;
  background: var(--cream);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.6
}

h1,
h2,
h3,
.brand,
.fight-card,
.offer-price,
.quick-offer strong,
.proof-row strong {
  font-family: "Barlow Condensed", Impact, "Arial Narrow", sans-serif
}

h1,
h2,
h3 {
  font-weight: 900;
  letter-spacing: -.012em
}

.wrap {
  width: min(1200px, calc(100% - 52px))
}

.site-header {
  position: absolute;
  background: rgba(15, 18, 18, .86);
  border-bottom: 1px solid #ffffff25
}

.nav {
  min-height: 76px
}

.brand {
  font-size: 2rem;
  font-weight: 900;
  font-style: italic;
  letter-spacing: .015em;
  transform: skew(-6deg)
}

.brand span {
  color: var(--red)
}

.navlinks {
  gap: 25px
}

.navlinks a {
  font-size: .81rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 800
}

.navlinks a:hover,
.navlinks a:focus {
  color: #ff7768
}

.button {
  background: var(--red);
  color: #fff;
  border-radius: 0;
  box-shadow: none;
  min-height: 53px;
  padding: 13px 24px;
  font-weight: 900;
  font-size: .86rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  gap: 24px;
  transition: background .2s, transform .2s
}

.button:hover,
.button:focus {
  background: #c83021;
  color: #fff;
  transform: translateY(-2px)
}

.button-outline {
  border: 1px solid #ffffffa8;
  background: transparent;
  color: #fff
}

.button-outline:hover {
  border-color: #fff;
  background: #fff;
  color: #151818
}

.button-dark {
  background: #171a1a;
  color: #fff
}

.button-dark:hover {
  background: #343b3a
}

.eyebrow {
  font-size: .79rem;
  font-weight: 900;
  letter-spacing: .2em;
  color: var(--red);
  margin-bottom: 15px
}

.eyebrow-sep {
  color: #fff;
  opacity: .6;
  padding: 0 8px
}

.section {
  padding: 100px 0
}

.section h2 {
  font-size: clamp(3rem, 6vw, 6rem);
  line-height: .91;
  margin-bottom: 25px;
  letter-spacing: -.018em
}

.section h2 em {
  color: var(--red);
  font-style: normal
}

.section-head {
  max-width: 960px;
  margin-bottom: 42px
}

.section-head p:not(.eyebrow) {
  font-size: 1.1rem;
  max-width: 670px;
  line-height: 1.6
}

.dark {
  background: #171b1b
}

.dark .section-head p {
  color: #d4d8d5
}

.hero {
  min-height: 760px;
  background: #111515;
  display: block;
  color: #fff;
  position: relative;
  overflow: hidden
}

.hero:before {
  background: linear-gradient(90deg, #0b1010 0%, #0b1010eb 34%, #0b101085 71%, #0b101045 100%), var(--hero-image) center 38%/cover no-repeat;
  inset: 0
}

.hero:after {
  content: "04";
  position: absolute;
  top: 14%;
  right: -1%;
  font: 900 clamp(17rem, 38vw, 40rem)/1 "Barlow Condensed", Impact, sans-serif;
  color: #fff;
  opacity: .06;
  pointer-events: none
}

.hero-layout {
  display: grid;
  /* grid-template-columns: minmax(0, 1.5fr) minmax(245px, .5fr); */
  grid-template-columns: minmax(0, 0.95fr) minmax(275px, 0.5fr);
  gap: 50px;
  align-items: end;
  min-height: 710px;
  padding-top: 150px;
  padding-bottom: 100px;
  position: relative;
  z-index: 1
}

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

.hero h1 {
  font-size: clamp(5rem, 10vw, 10rem);
  line-height: .82;
  letter-spacing: -.02em;
  max-width: 900px;
  margin-bottom: 31px
}

.hero-lead {
  max-width: 610px;
  font-size: clamp(1.13rem, 1.8vw, 1.4rem);
  font-weight: 600;
  line-height: 1.5;
  color: #f2f3f0
}

.hero-actions {
  gap: 25px;
  align-items: center;
  margin-top: 30px
}

.hero-actions .button {
  min-width: 270px
}

.text-link,
.under-link {
  display: inline-flex;
  gap: 14px;
  align-items: center;
  font-size: .84rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .1em;
  text-decoration: none;
  border-bottom: 2px solid currentColor;
  padding-bottom: 7px
}

.text-link:hover,
.under-link:hover {
  color: var(--red)
}

.hero-note {
  color: #d4d8d6;
  margin-top: 31px;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .025em
}

.fight-card {
  justify-self: end;
  display: flex;
  flex-direction: column;
  width: min(100%, 290px);
  padding: 20px 22px 25px;
  border: 1px solid #ffffff80;
  background: #0b1010c9;
  box-shadow: 10px 10px 0 var(--red);
  transform: rotate(2deg)
}

.fight-card-top {
  font: 800 .75rem/1.2 "DM Sans", sans-serif;
  letter-spacing: .12em;
  display: flex;
  justify-content: space-between;
  gap: 10px
}

.fight-card strong {
  font-size: clamp(5rem, 7vw, 7.4rem);
  line-height: .72;
  letter-spacing: -.02em;
  margin: 34px 0 30px
}

.fight-card .red-dot {
  color: var(--red)
}

.fight-card-bottom {
  font: 800 1.15rem/1.25 "Barlow Condensed", sans-serif;
  letter-spacing: .07em;
  text-transform: uppercase;
  border-top: 1px solid #ffffff75;
  padding-top: 15px
}

.hero-bottom {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 0;
  right: 0;
  background: #121515d9;
  border-top: 1px solid #ffffff26
}

.hero-bottom .wrap {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  font: 800 .78rem "DM Sans", sans-serif;
  letter-spacing: .22em
}

.hero-bottom span:not(:last-child):after {
  content: " ×";
  color: var(--red);
  margin-left: clamp(10px, 5vw, 65px)
}

.quick-offer {
  background: var(--red);
  color: #fff
}

.quick-offer-inner {
  display: grid;
  grid-template-columns: 1.2fr .8fr 1fr;
  align-items: center;
  gap: 30px;
  min-height: 125px
}

.quick-offer-inner>div {
  display: flex;
  flex-direction: column;
  gap: 3px
}

.quick-offer small {
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .16em
}

.quick-offer strong {
  font-size: clamp(1.5rem, 2.5vw, 2.3rem);
  font-weight: 900;
  line-height: 1
}

.quick-offer .button {
  align-self: flex-end
}

.intro-section {
  background: #f0ede5
}

.intro-grid {
  grid-template-columns: .95fr 1.05fr;
  gap: 6vw
}

.intro-text {
  padding: 15px 0
}

.intro-text .section-lead {
  font-size: 1.28rem;
  line-height: 1.5;
  font-weight: 700;
  color: #232929
}

.intro-text .under-link {
  margin-top: 20px;
  color: var(--red)
}

.feature-image,
.organizer-photo {
  position: relative;
  margin: 0
}

.feature-image img {
  display: block;
  width: 100%;
  height: 530px;
  object-fit: cover;
  filter: contrast(1.07) saturate(.88)
}

.feature-image:before {
  content: "";
  position: absolute;
  top: -16px;
  left: -16px;
  width: 48%;
  height: 48%;
  border: 3px solid var(--red);
  z-index: 0
}

.feature-image img {
  position: relative
}

.feature-image figcaption,
.organizer-photo figcaption {
  position: absolute;
  right: -14px;
  bottom: 24px;
  background: var(--red);
  color: #fff;
  font: 900 1.2rem "Barlow Condensed", sans-serif;
  letter-spacing: .1em;
  padding: 11px 20px;
  z-index: 1
}

.training-section {
  background: #161b1b;
  color: #fff
}

.training-section .section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 50px;
  max-width: none
}

.training-section .section-head p:not(.eyebrow) {
  max-width: 410px;
  margin-bottom: 15px
}

.discipline-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: #ffffff32;
  border: 1px solid #ffffff32
}

.discipline-grid article {
  background: #1b2221;
  padding: 30px;
  min-height: 265px
}

.discipline-grid article>span {
  color: var(--red);
  font: 900 1.3rem "Barlow Condensed", sans-serif
}

.discipline-grid h3 {
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  line-height: .95;
  margin: 32px 0 15px
}

.discipline-grid p {
  font-size: .94rem;
  color: #c8d1ce;
  margin: 0
}

.training-photo {
  height: 350px;
  position: relative;
  margin-top: 20px;
  overflow: hidden
}

.training-photo:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #0008, transparent)
}

.training-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 44%;
  filter: contrast(1.08)
}

.training-photo a {
  position: absolute;
  z-index: 2;
  right: 20px;
  bottom: 20px;
  background: var(--red);
  color: #fff;
  padding: 12px 18px;
  text-decoration: none;
  font-weight: 800;
  text-transform: uppercase;
  font-size: .8rem;
  letter-spacing: .08em
}

.community-section {
  background: #e9e6df;
  color: #131818
}

.community-section .section-head p:not(.eyebrow) {
  color: #39423f
}

.media-grid {
  grid-template-columns: 1.25fr .8fr .8fr;
  gap: 10px
}

.media-grid img {
  height: 380px;
  border-radius: 0;
  filter: contrast(1.05)
}

.proof-row {
  border-top: 1px solid #343b3b5e;
  margin-top: 35px;
  padding-top: 28px;
  display: grid;
  grid-template-columns: 160px 1fr auto;
  align-items: center;
  gap: 30px
}

.proof-row strong {
  font-size: 4.7rem;
  line-height: .8;
  color: var(--red)
}

.proof-row small {
  font: 800 .65rem "DM Sans", sans-serif;
  letter-spacing: .1em;
  display: block;
  color: #252c2a;
  line-height: 1.4
}

.proof-row p {
  margin: 0;
  max-width: 530px
}

.proof-row .under-link {
  white-space: nowrap
}

.quotes-section {
  background: #f6f4ee
}

.quote-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr))
}

.quote {
  border-radius: 0;
  border-top: 4px solid var(--red);
  box-shadow: 0 5px 24px #13151515
}

.offer-section {
  background: #141919;
  color: #fff
}

.offer-grid {
  grid-template-columns: .95fr 1.05fr;
  align-items: start;
  gap: 6vw
}

.offer-heading {
  position: sticky;
  top: 30px
}

.offer-heading p:not(.eyebrow) {
  font-size: 1.1rem;
  max-width: 450px;
  color: #c8d1ce
}

.offer-photo {
  min-height: 0;
  max-height: none;
  width: 100%;
  height: 300px;
  object-fit: cover;
  filter: contrast(1.12) saturate(.85);
  margin-top: 22px;
  border-radius: 0
}

.offer-panel {
  background: #f0ede5;
  color: #111515;
  padding: 38px 42px;
  border-radius: 0;
  box-shadow: 13px 13px 0 var(--red)
}

.offer-panel-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 15px;
  border-bottom: 1px solid #1115155b;
  font-size: .69rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase
}

.offer-price {
  font-size: clamp(5rem, 8vw, 8.1rem);
  white-space: nowrap;
  line-height: .95;
  margin: 20px 0
}

.offer-price small {
  display: block;
  font: 800 .76rem "DM Sans", sans-serif;
  letter-spacing: .13em;
  margin-top: 7px
}

.offer-panel>p {
  font-weight: 700
}

.offer-panel .check-list {
  margin: 12px 0 30px
}

.check-list li {
  padding-left: 30px;
  margin: 12px 0
}

.check-list li:before {
  content: "+";
  color: var(--red);
  font-size: 1.25rem;
  top: -2px
}

.deposit {
  border-top: 1px solid #11151554;
  border-bottom: 1px solid #11151554;
  padding: 17px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px
}

.deposit span {
  font-size: .75rem;
  letter-spacing: .1em
}

.deposit strong {
  font: 900 1.7rem "Barlow Condensed", sans-serif
}

.offer-panel .button {
  width: 100%
}

.offer-panel .micro {
  font-weight: 400;
  color: #59615e;
  font-size: .8rem;
  margin-top: 15px
}

.offer-panel .availability {
  color: var(--red);
  margin: 15px 0 0
}

.jim-section {
  background: #e9e6df
}

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

.organizer-image {
  display: block;
  width: 100%;
  height: 570px;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center 20%;
  filter: contrast(1.08) saturate(.86);
  border-radius: 0
}

.organizer-photo figcaption {
  right: auto;
  left: -12px
}

.jim-section .button-outline {
  color: #151919;
  border-color: #151919
}

.jim-section .button-outline:hover {
  background: #151919;
  color: #fff
}

.faq-section {
  background: #f4f1ea
}

.faq-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 7vw
}

.faq-section .section-head {
  position: sticky;
  top: 28px;
  align-self: start;
  margin: 0
}

.faq-list {
  width: 100%
}

.faq-list details {
  border-bottom: 1px solid #20272755
}

.faq-list details:first-child {
  border-top: 1px solid #20272755
}

.faq-list summary {
  font-weight: 800;
  font-size: 1.05rem
}

.faq-list summary:after {
  color: var(--red)
}

.faq-answer {
  color: #404a46
}

.faq-section .under-link {
  margin-top: 20px
}

.contact-band {
  background: var(--red);
  color: #fff;
  padding: 85px 0;
  position: relative;
  overflow: hidden
}

.contact-band:after {
  content: "THAI CAMP";
  font: 900 15vw/.75 "Barlow Condensed", sans-serif;
  position: absolute;
  bottom: -4vw;
  right: -1vw;
  opacity: .08;
  pointer-events: none;
  white-space: nowrap
}

.contact-band>.wrap {
  position: relative;
  z-index: 1
}

.contact-band .eyebrow {
  color: #fff
}

.contact-band h2 {
  font: 900 clamp(4.5rem, 10vw, 9rem)/.82 "Barlow Condensed", sans-serif;
  letter-spacing: -.02em;
  margin: 0 auto 28px
}

.contact-band p:not(.eyebrow) {
  max-width: 510px;
  margin: 0 auto 25px;
  font-weight: 700
}

.contact-band .button {
  background: #121616;
  color: #fff
}

.contact-band small {
  display: block;
  margin-top: 14px
}

.site-footer {
  background: #0e1212
}

.standard-page {
  padding-top: 155px
}

body:not(.home) .site-header {
  background: #121818
}

@media(max-width:1000px) {
  .hero-layout {
    grid-template-columns: 1fr;
    align-items: center;
    gap: 25px;
    padding-bottom: 110px
  }

  .fight-card {
    display: none
  }

  .hero h1 {
    max-width: 750px
  }

  .offer-grid {
    gap: 35px
  }

  .offer-panel {
    padding: 30px
  }

  .offer-price {
    font-size: 5.9rem
  }

  .media-grid img {
    height: 280px
  }
}

@media(max-width:700px) {
  .wrap {
    width: min(100% - 32px, 1200px)
  }

  .nav {
    min-height: 70px
  }

  .navlinks {
    top: 70px;
    background: #121818
  }

  .navlinks .button {
    align-self: stretch
  }

  .menu-toggle {
    display: block;
    border-radius: 0
  }

  .hero {
    min-height: 720px
  }

  .hero:before {
    background: linear-gradient(90deg, #0a1010ed, #0a1010a0), var(--hero-image) 55% center/cover no-repeat
  }

  .hero-layout {
    min-height: 720px;
    padding-top: 135px;
    padding-bottom: 115px;
    display: flex;
    align-items: center;
    flex-direction: column;
  }

  .hero h1 {
    font-size: clamp(4.1rem, 14vw, 6.7rem)
  }

  .hero-lead {
    font-size: 1.05rem
  }

  .hero-actions {
    align-items: flex-start;
    gap: 20px
  }

  .hero-actions .button {
    max-width: none
  }

  .hero-bottom .wrap {
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap
  }

  .hero-bottom span:not(:last-child):after {
    margin-left: 12px
  }

  .hero-bottom span {
    font-size: .65rem
  }

  .quick-offer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 24px 0
  }

  .quick-offer-inner>div:last-child {
    grid-column: 1/-1
  }

  .quick-offer .button {
    width: 100%
  }

  .section {
    padding: 70px 0
  }

  .section h2 {
    font-size: clamp(3.2rem, 11vw, 5rem)
  }

  .intro-grid,
  .organizer-grid,
  .offer-grid,
  .faq-grid {
    grid-template-columns: 1fr
  }

  .feature-image img {
    height: 350px
  }

  .feature-image {
    margin: 8px 0 0 12px
  }

  .training-section .section-head {
    display: block
  }

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

  .discipline-grid article {
    min-height: 0;
    padding: 24px
  }

  .discipline-grid h3 {
    margin: 15px 0 10px
  }

  .training-photo {
    height: 240px
  }

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

  .media-grid img {
    height: 180px
  }

  .media-grid img:first-child {
    grid-column: 1/-1;
    height: 280px
  }

  .proof-row {
    grid-template-columns: 1fr 1fr;
    gap: 16px
  }

  .proof-row p {
    grid-column: 1/-1;
    grid-row: 2
  }

  .proof-row .under-link {
    justify-self: end;
    white-space: normal
  }

  .offer-heading {
    position: static
  }

  .offer-photo {
    height: 220px
  }

  .offer-panel {
    box-shadow: 8px 8px 0 var(--red)
  }

  .offer-price {
    font-size: clamp(5rem, 17vw, 7.5rem)
  }

  .organizer-photo {
    order: -1
  }

  .organizer-image {
    height: 390px
  }

  .faq-section .section-head {
    position: static
  }

  .contact-band {
    padding: 70px 0
  }

  .contact-band h2 {
    font-size: clamp(4.7rem, 15vw, 7rem)
  }
}

@media(prefers-reduced-motion:reduce) {
  .button {
    transition: none
  }

  .button:hover,
  .button:focus {
    transform: none
  }
}

/* Countdown is the first visible band on every page. */
.camp-countdown {
  position: relative;
  z-index: 12;
  background: var(--red);
  color: #fff;
  min-height: 62px
}

.countdown-inner {
  min-height: 62px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(18px, 5vw, 78px)
}

.countdown-heading {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .15em;
  white-space: nowrap
}

.countdown-heading strong {
  font-weight: 900
}

.countdown-numbers {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-variant-numeric: tabular-nums
}

.countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 42px;
  line-height: 1
}

.countdown-unit strong {
  font: 900 1.7rem/.9 "Barlow Condensed", Impact, sans-serif;
  letter-spacing: .02em
}

.countdown-unit small {
  margin-top: 5px;
  font-size: .55rem;
  font-weight: 900;
  letter-spacing: .12em
}

.countdown-divider {
  font: 900 1.5rem/.8 "Barlow Condensed", Impact, sans-serif;
  opacity: .6
}

.site-header {
  top: 62px
}

.hero-layout {
  padding-top: 150px
}

.standard-page {
  padding-top: 155px
}

@media(max-width:700px) {
  .camp-countdown {
    min-height: 74px
  }

  .countdown-inner {
    min-height: 74px;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 8px 0
  }

  .countdown-heading {
    font-size: .63rem;
    letter-spacing: .09em
  }

  .countdown-numbers {
    gap: 6px
  }

  .countdown-unit {
    min-width: 35px
  }

  .countdown-unit strong {
    font-size: 1.35rem
  }

  .countdown-unit small {
    font-size: .48rem;
    margin-top: 3px
  }

  .countdown-divider {
    font-size: 1.2rem
  }

  .site-header {
    top: 74px
  }

  .hero-layout {
    padding-top: 160px
  }

  .standard-page {
    padding-top: 166px
  }
}

/* Camp film and participant interviews */
.camp-film {
  background: #101515;
  color: #fff;
  padding: 75px 0
}

.film-grid {
  display: grid;
  grid-template-columns: .58fr 1.42fr;
  align-items: center;
  gap: 6vw
}

.film-copy h2 {
  font-size: clamp(3.8rem, 6vw, 6.7rem)
}

.film-copy p:not(.eyebrow) {
  color: #d3ddda;
  max-width: 340px
}

.film-copy .under-link {
  margin-top: 12px;
  color: #fff
}

.film-player {
  min-width: 0;
  border: 1px solid #ffffff3d;
  padding: 8px;
  background: #202525;
  box-shadow: 11px 11px 0 var(--red);
  height: 100%;
}

.video-frame {
  position: relative;
  background: #000
}

.film-player video {
  display: block;
  width: 100%;
  /* aspect-ratio: 16/9; */
  object-fit: contain;
  background: #000
}

.video-unmute {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  border: 1px solid #ffffff9e;
  background: #111c1de0;
  color: #fff;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 10px 14px;
  cursor: pointer
}

.video-unmute:hover,
.video-unmute:focus-visible {
  background: var(--red)
}

.video-unmute[hidden] {
  display: none
}

.film-player>span {
  display: block;
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .17em;
  padding: 12px 7px 5px
}

.video-interviews {
  background: #151b1b;
  color: #fff
}

.video-interviews .section-head p:not(.eyebrow) {
  color: #cbd5d1
}

.interview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px
}

.interview-card {
  background: #232a29;
  border-top: 4px solid var(--red);
  min-width: 0
}

.interview-card video {
  display: block;
  width: 100%;
  /* aspect-ratio: 16/9; */
  background: #000;
  object-fit: contain
}

.interview-card>div {
  padding: 19px 22px 20px
}

.interview-card small {
  display: block;
  color: #fd7465;
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .18em;
  margin-bottom: 5px
}

.interview-card h3 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  text-transform: uppercase;
  margin: 0
}

@media(max-width:700px) {
  .camp-film {
    padding: 68px 0
  }

  .film-grid,
  .interview-grid {
    grid-template-columns: 1fr
  }

  .film-copy h2 {
    font-size: clamp(3.5rem, 12vw, 5.5rem)
  }

  .film-player {
    box-shadow: 7px 7px 0 var(--red)
  }
}