The Onionのデザインシステム

<div class="c-button-primary-scope">
  <button class="c-button-primary" type="button">lorem</button>
</div>

.c-button-primary-scope {
  background-color: #FEEB80;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-button-primary {
  display: inline-block;
  align-self: flex-end;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 16px 32px;
  position: relative;
  background-color: #000000;
  color: #FFFFFF;
  border: 1px solid #000000;
  cursor: pointer;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15.7472px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  transition: all 0.35s ease;
}

.c-button-primary:hover {
  opacity: 0.5;
}

<div class="c-button-ghost-scope">
  <button class="c-button-ghost" type="button">lore</button>
</div>

.c-button-ghost-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: tablet-gothic-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15.7472px;
  font-weight: 500;
  line-height: 23.6208px;
}

.c-button-ghost {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 1px 13.3851px 1px 0px;
  background-color: transparent;
  color: #000000;
  border: 0;
  cursor: pointer;
  font-family: tablet-gothic-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15.7472px;
  font-weight: 500;
  line-height: 23.6208px;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  list-style-type: none;
}

.c-button-ghost:hover {
  color: #006B3A;
}

<div class="c-input-scope">
  <input class="c-input" type="email" placeholder="lorem ipsum dolor sit am">
</div>

.c-input-scope {
  background-color: #FEEB80;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-input {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 219px;
  height: 57px;
  max-width: 100%;
  padding: 16px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: #FFFFFF;
  color: #000000;
  border: 1px solid #000000;
  cursor: text;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15.7472px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  appearance: none;
  transition: all 0.35s ease-in-out;
}

.c-input:hover {
  border: 1px solid #94D1B4;
}

.c-input:focus {
  outline: none;
}

<div class="c-input-2-scope">
  <input class="c-input-2" type="text" placeholder="l">
</div>

.c-input-2-scope {
  background-color: #FEEB80;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 19.2px;
}

.c-input-2 {
  display: block;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  max-width: 100%;
  padding: 0px;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: #FFFFFF;
  color: #000000;
  border: 1px solid #000000;
  cursor: default;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13.3333px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  appearance: none;
  transition: all 0.35s ease-in-out;
  margin-top: 3px;
  margin-right: 3px;
  margin-left: 4px;
}

.c-input-2:hover {
  min-width: 0px;
  min-height: 0px;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  border: 1px solid #94D1B4;
}

.c-input-2:focus {
  min-width: 0px;
  min-height: 0px;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  border: 1px solid #006B3A;
}

<div class="c-input-3-scope">
  <input class="c-input-3" type="email" placeholder="lorem ipsum dolor sit am">
</div>

.c-input-3-scope {
  background-color: #FEEB80;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-input-3 {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 689px;
  height: 57px;
  max-width: 100%;
  padding: 16px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: #FFFFFF;
  color: #000000;
  border: 1px solid #000000;
  cursor: text;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  appearance: none;
  transition: all 0.35s ease-in-out;
}

.c-input-3:hover {
  border: 1px solid #94D1B4;
}

.c-input-3:focus {
  outline: none;
}

<div class="c-input-4-scope">
  <input class="c-input-4" type="email" placeholder="lorem ipsum dolor sit am">
</div>

.c-input-4-scope {
  background-color: #FEEB80;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-input-4 {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 463px;
  height: 57px;
  max-width: 100%;
  padding: 16px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: #FFFFFF;
  color: #000000;
  border: 1px solid #000000;
  cursor: text;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  appearance: none;
  transition: all 0.35s ease-in-out;
}

.c-input-4:focus {
  outline: none;
}

<div class="c-card-scope">
  <li class="c-card">
    <article class="c-card__group">
      <div class="c-card__group-2">
        <figure class="c-card__group-3">
          <a class="c-card__link" href="#"></a>
        </figure>
        <div class="c-card__group-4">
          <div class="c-card__group-5"></div>
          <h3 class="c-card__title"></h3>
        </div>
      </div>
    </article>
  </li>
</div>

.c-card-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-card {
  display: list-item;
  border-spacing: 0px;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  list-style-type: none;
}

.c-card__group {
  display: block;
  box-sizing: border-box;
}

.c-card__group-2 {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: 16px;
  box-sizing: border-box;
}

.c-card__group-3 {
  display: block;
  flex-grow: 1.2;
  flex-basis: 0%;
  margin: 0px;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
}

.c-card__link {
  display: block;
  height: 100%;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  color: #000000;
  cursor: pointer;
  text-decoration-line: none;
  transition: all 0.35s ease;
}

.c-card__link::before {
  content: "";
  display: block;
  width: 116px;
  height: 4px;
  position: absolute;
  top: 77.5156px;
  right: 0px;
  bottom: -4px;
  left: 0px;
  z-index: 99;
  transition: all 0.15s linear;
}

.c-card__group-4 {
  display: block;
  flex-grow: 1.8;
  flex-basis: 0%;
  box-sizing: border-box;
}

.c-card__group-5 {
  display: block;
  box-sizing: border-box;
  color: #006B3A;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15.7472px;
  font-weight: 700;
  line-height: 23.6208px;
  margin-bottom: 8px;
}

.c-card__title {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  font-family: rocky-condensed, Georgia, Times, "Times New Roman", serif;
  font-size: 21.008px;
  font-weight: 400;
  line-height: 23.1088px;
}

.c-card:hover {
  transform-origin: 153.352px 50.9609px;
}

.c-card:focus {
  transform-origin: 153.352px 50.9609px;
}

<div class="c-card-2-scope">
  <li class="c-card-2">
    <div class="c-card-2__group">
      <figure class="c-card-2__group-2">
        <a class="c-card-2__link" href="#"></a>
      </figure>
      <div class="c-card-2__group-3">
        <div class="c-card-2__group-4"></div>
        <h3 class="c-card-2__title"></h3>
      </div>
    </div>
  </li>
</div>

.c-card-2-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-card-2 {
  display: inline-block;
  flex-shrink: 0;
  flex-basis: calc(33.3333% - 21.3333px);
  border-spacing: 0px;
  width: 306.667px;
  min-width: calc(33.3333% - 21.3333px);
  max-width: calc(33.3333% - 21.3333px);
  position: relative;
  color: #000000;
  transform: matrix(1, 0, 0, 1, 0, 0);
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  list-style-type: none;
}

.c-card-2::before {
  content: "";
  display: block;
  width: 1px;
  height: 533px;
  position: absolute;
  top: 0px;
  right: 321.688px;
  bottom: 0px;
  left: -16px;
  background-color: #E6E6E6;
}

.c-card-2__group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  box-sizing: border-box;
}

.c-card-2__group-2 {
  display: block;
  flex-grow: 1.2;
  flex-basis: 0%;
  width: 100%;
  margin: 0px;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
}

.c-card-2__link {
  display: block;
  height: 100%;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  color: #000000;
  cursor: pointer;
  text-decoration-line: none;
  transition: all 0.35s ease;
}

.c-card-2__link::before {
  content: "";
  display: block;
  width: 307px;
  height: 4px;
  position: absolute;
  top: 172.5px;
  right: 0px;
  bottom: -4px;
  left: 0px;
  z-index: 99;
  transition: all 0.15s linear;
}

.c-card-2__group-3 {
  display: block;
  flex-grow: 1.8;
  flex-basis: 0%;
  box-sizing: border-box;
}

.c-card-2__group-4 {
  display: block;
  box-sizing: border-box;
  color: #006B3A;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15.7472px;
  font-weight: 700;
  line-height: 23.6208px;
  margin-bottom: 8px;
}

.c-card-2__title {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  font-family: rocky-condensed, Georgia, Times, "Times New Roman", serif;
  font-size: 21.008px;
  font-weight: 400;
  line-height: 23.1088px;
}

<div class="c-card-3-scope">
  <li class="c-card-3">
    <article class="c-card-3__group">
      <div class="c-card-3__group-2">
        <figure class="c-card-3__group-3">
          <a class="c-card-3__link" href="#"></a>
        </figure>
        <div class="c-card-3__group-4">
          <div class="c-card-3__group-5"></div>
          <h3 class="c-card-3__title"></h3>
        </div>
      </div>
    </article>
  </li>
</div>

.c-card-3-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-card-3 {
  display: list-item;
  border-spacing: 0px;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  list-style-type: none;
}

.c-card-3__group {
  display: block;
  box-sizing: border-box;
}

.c-card-3__group-2 {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: 16px;
  box-sizing: border-box;
}

.c-card-3__group-3 {
  display: block;
  flex-grow: 1.2;
  flex-basis: 0%;
  margin: 0px;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
}

.c-card-3__link {
  display: block;
  height: 100%;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  color: #000000;
  cursor: pointer;
  text-decoration-line: none;
  transition: all 0.35s ease;
}

.c-card-3__link::before {
  content: "";
  display: block;
  width: 116px;
  height: 4px;
  position: absolute;
  top: 116.281px;
  right: 0px;
  bottom: -4px;
  left: 0px;
  z-index: 99;
  transition: all 0.15s linear;
}

.c-card-3__group-4 {
  display: block;
  flex-grow: 1.8;
  flex-basis: 0%;
  box-sizing: border-box;
}

.c-card-3__group-5 {
  display: block;
  box-sizing: border-box;
  color: #006B3A;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15.7472px;
  font-weight: 700;
  line-height: 23.6208px;
  margin-bottom: 8px;
}

.c-card-3__title {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  font-family: rocky-condensed, Georgia, Times, "Times New Roman", serif;
  font-size: 21.008px;
  font-weight: 400;
  line-height: 23.1088px;
}

<div class="c-card-4-scope">
  <li class="c-card-4">
    <article class="c-card-4__group">
      <div class="c-card-4__group-2">
        <figure class="c-card-4__group-3">
          <a class="c-card-4__link" href="#"></a>
        </figure>
        <div class="c-card-4__group-4">
          <div class="c-card-4__group-5"></div>
          <h3 class="c-card-4__title"></h3>
        </div>
      </div>
    </article>
  </li>
</div>

.c-card-4-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-card-4 {
  display: list-item;
  border-spacing: 0px;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  list-style-type: none;
}

.c-card-4__group {
  display: block;
  box-sizing: border-box;
}

.c-card-4__group-2 {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  box-sizing: border-box;
}

.c-card-4__group-3 {
  display: block;
  flex-grow: 1.2;
  flex-basis: 0%;
  margin: 0px;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
}

.c-card-4__link {
  display: block;
  height: 100%;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  color: #000000;
  cursor: pointer;
  text-decoration-line: none;
  transition: all 0.35s ease;
}

.c-card-4__link::before {
  content: "";
  display: block;
  width: 200px;
  height: 4px;
  position: absolute;
  top: 133.469px;
  right: 0px;
  bottom: -4px;
  left: 0px;
  z-index: 99;
  transition: all 0.15s linear;
}

.c-card-4__group-4 {
  display: block;
  flex-grow: 1.8;
  flex-basis: 0%;
  box-sizing: border-box;
}

.c-card-4__group-5 {
  display: block;
  box-sizing: border-box;
  color: #006B3A;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15.7472px;
  font-weight: 700;
  line-height: 23.6208px;
  margin-bottom: 8px;
}

.c-card-4__title {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  font-family: rocky-condensed, Georgia, Times, "Times New Roman", serif;
  font-size: 27.1232px;
  font-weight: 400;
  line-height: 29.8355px;
}

<div class="c-card-5-scope">
  <li class="c-card-5">
    <article class="c-card-5__group">
      <div class="c-card-5__group-2">
        <div class="c-card-5__group-3">
          <figure class="c-card-5__group-4"></figure>
        </div>
        <div class="c-card-5__group-5">
          <div class="c-card-5__group-6"></div>
          <h3 class="c-card-5__title"></h3>
          <div class="c-card-5__group-7"></div>
        </div>
      </div>
    </article>
  </li>
</div>

.c-card-5-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-card-5 {
  display: list-item;
  border-spacing: 0px;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  list-style-type: none;
}

.c-card-5__group {
  display: block;
  box-sizing: border-box;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #E6E6E6;
}

.c-card-5__group-2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: 32px;
  box-sizing: border-box;
}

.c-card-5__group-3 {
  display: block;
  flex-basis: calc(25% - 24px);
  min-width: calc(25% - 24px);
  max-width: calc(25% - 24px);
}

.c-card-5__group-4 {
  display: block;
  margin: 0px;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
}

.c-card-5__group-5 {
  display: block;
  flex-basis: calc(66.6667% - 10.6667px);
  min-width: calc(66.6667% - 10.6667px);
  max-width: calc(66.6667% - 10.6667px);
  position: relative;
}

.c-card-5__group-6 {
  display: block;
  box-sizing: border-box;
  color: #006B3A;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15.7472px;
  font-weight: 700;
  line-height: 23.6208px;
  margin-bottom: 8px;
}

.c-card-5__title {
  display: block;
  box-sizing: border-box;
  margin: 0px 0px 8px;
  font-family: rocky-condensed, Georgia, Times, "Times New Roman", serif;
  font-size: 27.1232px;
  font-weight: 400;
  line-height: 29.8355px;
}

.c-card-5__group-7 {
  display: block;
  box-sizing: border-box;
  color: #676767;
  font-size: 15.7472px;
  line-height: 23.6208px;
}

<div class="c-card-6-scope">
  <header class="c-card-6">
    <div class="c-card-6__group">
      <div class="c-card-6__text">lorem ip</div>
      <h1 class="c-card-6__title">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmo</h1>
      <p class="c-card-6__body">lorem ipsum dolor sit amet consectetur adip</p>
      <div class="c-card-6__group-2"></div>
    </div>
    <div class="c-card-6__group">
      <div class="c-card-6__group-3">
        <figure class="c-card-6__group-4">
          <span class="c-card-6__media" aria-hidden="true"></span>
        </figure>
      </div>
      <div class="c-card-6__group-5"></div>
    </div>
  </header>
</div>

.c-card-6-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-card-6 {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-card-6__group {
  display: block;
  box-sizing: border-box;
}

.c-card-6__text {
  display: block;
  box-sizing: border-box;
  color: #006B3A;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15.7472px;
  font-weight: 700;
  line-height: 23.6208px;
  margin-bottom: 8px;
}

.c-card-6__title {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  font-family: rocky-compressed, Georgia, Times, "Times New Roman", serif;
  font-size: 65.008px;
  font-weight: 800;
  line-height: 65.008px;
}

.c-card-6__body {
  display: block;
  box-sizing: border-box;
  margin: 8px 0px 0px;
  color: #676767;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 27.1232px;
  line-height: 40.6848px;
}

.c-card-6__group-2 {
  display: block;
  height: 32px;
}

.c-card-6__group-3 {
  display: block;
  box-sizing: border-box;
  position: relative;
}

.c-card-6__group-4 {
  display: block;
  margin: 0px 0px 16px;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
}

.c-card-6__media {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 758px;
  height: 427px;
  max-width: 100%;
  aspect-ratio: auto 1600 / 900;
  overflow-x: clip;
  overflow-y: clip;
  vertical-align: bottom;
  background-color: currentcolor;
}

.c-card-6__group-5 {
  display: block;
  height: 16px;
}

<div class="c-card-7-scope">
  <li class="c-card-7">
    <div class="c-card-7__group">
      <figure class="c-card-7__group-2">
        <a class="c-card-7__link" href="#"></a>
      </figure>
      <div class="c-card-7__group-3">
        <div class="c-card-7__group-4"></div>
        <h3 class="c-card-7__title"></h3>
      </div>
    </div>
  </li>
</div>

.c-card-7-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-card-7 {
  display: list-item;
  border-spacing: 0px;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  list-style-type: none;
}

.c-card-7__group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  box-sizing: border-box;
}

.c-card-7__group-2 {
  display: block;
  flex-grow: 1.2;
  flex-basis: 0%;
  width: 100%;
  margin: 0px;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
}

.c-card-7__link {
  display: block;
  height: 100%;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  color: #000000;
  cursor: pointer;
  text-decoration-line: none;
  transition: all 0.35s ease;
}

.c-card-7__link::before {
  content: "";
  display: block;
  width: 307px;
  height: 4px;
  position: absolute;
  top: 204.469px;
  right: 0px;
  bottom: -4px;
  left: 0px;
  z-index: 99;
  transition: all 0.15s linear;
}

.c-card-7__group-3 {
  display: block;
  flex-grow: 1.8;
  flex-basis: 0%;
  box-sizing: border-box;
}

.c-card-7__group-4 {
  display: block;
  box-sizing: border-box;
  color: #006B3A;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15.7472px;
  font-weight: 700;
  line-height: 23.6208px;
  margin-bottom: 8px;
}

.c-card-7__title {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  font-family: rocky-condensed, Georgia, Times, "Times New Roman", serif;
  font-size: 21.008px;
  font-weight: 400;
  line-height: 23.1088px;
}

.c-card-7:hover {
  position: static;
}

.c-card-7:focus {
  position: static;
}

<div class="c-navigation-scope">
  <nav class="c-navigation">
    <ul class="c-navigation__list">
      <li class="c-navigation__item">lore</li>
      <li class="c-navigation__item">lorem</li>
      <li class="c-navigation__item">lorem ip</li>
      <li class="c-navigation__item">lorem ipsum d</li>
      <li class="c-navigation__item">lorem</li>
      <li class="c-navigation__item">lorem i</li>
      <li class="c-navigation__item">lorem ipsum dol</li>
      <li class="c-navigation__item">
        <button class="c-navigation__button" type="button">lore</button>
        <span class="c-navigation__group">
          <span class="c-navigation__icon" aria-hidden="true"></span>
        </span>
      </li>
    </ul>
  </nav>
</div>

.c-navigation-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-navigation {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7.8736px;
  border-spacing: 0px;
  position: relative;
  color: #000000;
  font-family: tablet-gothic-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15.7472px;
  font-weight: 500;
  line-height: 23.6208px;
}

.c-navigation__list {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  gap: 16px;
  padding: 0px;
  margin: 0px;
  position: relative;
  list-style-type: none;
}

.c-navigation__item {
  display: flex;
  align-items: center;
  position: relative;
}

.c-navigation__button {
  display: block;
  box-sizing: border-box;
  padding: 1px 13.3851px 1px 0px;
  background-color: transparent;
  color: #000000;
  border: 0;
  cursor: pointer;
  font-family: tablet-gothic-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15.7472px;
  font-weight: 500;
  line-height: 23.6208px;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
}

.c-navigation__group {
  display: block;
  align-self: center;
  width: 9.44832px;
  height: 9.44832px;
  line-height: 0px;
  margin-left: -9.44832px;
}

.c-navigation__icon {
  display: inline-block;
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
  margin-top: 1.18104px;
}

<div class="c-navigation-2-scope">
  <nav class="c-navigation-2">
    <ul class="c-navigation-2__list">
      <li class="c-navigation-2__item">lorem ipsu</li>
      <li class="c-navigation-2__item">lore</li>
      <li class="c-navigation-2__item">lorem</li>
      <li class="c-navigation-2__item">lorem ip</li>
      <li class="c-navigation-2__item">lorem ipsum d</li>
      <li class="c-navigation-2__item">lorem</li>
      <li class="c-navigation-2__item">lorem i</li>
      <li class="c-navigation-2__item">lorem</li>
    </ul>
  </nav>
</div>

.c-navigation-2-scope {
  background-color: #000000;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-navigation-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  border-spacing: 0px;
  position: relative;
  color: #FFFFFF;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 20.3792px;
  font-weight: 400;
  line-height: 30.5688px;
}

.c-navigation-2__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-grow: 1;
  gap: 16px;
  width: 100%;
  padding: 0px;
  margin: 0px;
  position: relative;
  list-style-type: none;
}

.c-navigation-2__item {
  display: flex;
  align-items: center;
  position: relative;
  text-align: left;
}

<div class="c-navigation-3-scope">
  <nav class="c-navigation-3">
    <ul class="c-navigation-3__list">
      <li class="c-navigation-3__item">lorem</li>
      <li class="c-navigation-3__item">lorem ip</li>
      <li class="c-navigation-3__item">lorem ipsum dol</li>
      <li class="c-navigation-3__item">lorem ipsum dol</li>
      <li class="c-navigation-3__item">lorem ipsum dolor</li>
      <li class="c-navigation-3__item">lore</li>
    </ul>
  </nav>
</div>

.c-navigation-3-scope {
  background-color: #000000;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-navigation-3 {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
  border-spacing: 0px;
  position: relative;
  color: #FFFFFF;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 20.3792px;
  font-weight: 400;
  line-height: 30.5688px;
}

.c-navigation-3__list {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  flex-grow: 1;
  gap: 16px;
  width: 100%;
  padding: 0px;
  margin: 0px;
  position: relative;
  list-style-type: none;
}

.c-navigation-3__item {
  display: flex;
  align-items: center;
  position: relative;
  text-align: left;
}

<div class="c-header-scope">
  <header class="c-header">
    <div class="c-header__group">
      <div class="c-header__inner">
        <div class="c-header__group-2"></div>
      </div>
      <div class="c-header__inner-2">
        <div class="c-header__group-3">
          <div class="c-header__inner-3">
            <div class="c-header__group-4">
              <a class="c-header__logo" href="#">
                <figure class="c-header__group-5">
                  <span class="c-header__logo-image" aria-hidden="true"></span>
                </figure>
                <p class="c-header__logo-text">lorem ipsum dolor sit amet cons</p>
              </a>
            </div>
            <div class="c-header__group-6"></div>
            <div class="c-header__group-7">
              <div class="c-header__group-8">
                <p class="c-header__text">lorem ipsum dolor sit a</p>
                <div class="c-header__group-9">
                  <p class="c-header__group-10"></p>
                </div>
              </div>
            </div>
          </div>
          <div class="c-header__inner-4">
            <div class="c-header__group-4">
              <div class="c-header__group-11">
                <a class="c-header__link" href="#">
                  <span class="c-header__link-image" aria-hidden="true"></span>
                </a>
              </div>
              <p class="c-header__group-12">
                <em class="c-header__text-2">lorem ipsum dolor sit amet c</em>
              </p>
            </div>
            <div class="c-header__group-6"></div>
            <div class="c-header__group-13">
              <div class="c-header__inner-5">
                <nav class="c-header__nav">
                  <ul class="c-header__nav-list"></ul>
                </nav>
              </div>
            </div>
          </div>
          <div class="c-header__inner-6">
            <div class="c-header__group-4">
              <span class="c-header__image" aria-hidden="true"></span>
            </div>
            <div class="c-header__group-6"></div>
            <div class="c-header__group-14">
              <div class="c-header__inner-7">
                <p class="c-header__group-15">
                  <a class="c-header__link-2" href="#">lorem ipsu</a>
                </p>
                <ul class="c-header__nav-2">
                  <li class="c-header__item"></li>
                  <li class="c-header__item"></li>
                  <li class="c-header__item"></li>
                  <li class="c-header__item"></li>
                  <li class="c-header__item"></li>
                  <li class="c-header__item"></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="c-header__group-16"></div>
      </div>
    </div>
  </header>
</div>

.c-header-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-header {
  display: block;
  border-spacing: 0px;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-header__group {
  display: block;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  padding-right: 28.8px;
  padding-bottom: 16px;
  padding-left: 28.8px;
}

.c-header__inner {
  display: block;
  box-sizing: border-box;
  max-width: 1600px;
  margin-right: auto;
  margin-left: auto;
}

.c-header__group-2 {
  display: block;
  height: 16px;
}

.c-header__inner-2 {
  display: block;
  box-sizing: border-box;
  max-width: 1600px;
  padding-right: 28.8px;
  padding-left: 28.8px;
  margin-right: auto;
  margin-left: auto;
  border-right-width: 1px;
  border-left-width: 1px;
  border-right-style: solid;
  border-left-style: solid;
  border-right-color: #E6E6E6;
  border-left-color: #E6E6E6;
}

.c-header__group-3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 32px;
  box-sizing: border-box;
}

.c-header__inner-3 {
  display: block;
  flex-basis: calc(25% - 24px);
  min-width: calc(25% - 24px);
  max-width: calc(25% - 24px);
}

.c-header__group-4 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  height: 127px;
}

.c-header__logo {
  display: block;
  color: #000000;
  cursor: pointer;
  text-decoration-line: none;
  transition: all 0.35s ease;
}

.c-header__group-5 {
  display: block;
  margin: 0px 0px 16px;
}

.c-header__logo-image {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 307px;
  height: 84px;
  max-width: 100%;
  aspect-ratio: auto 752 / 206;
  overflow-x: clip;
  overflow-y: clip;
  vertical-align: bottom;
  background-color: currentcolor;
}

.c-header__logo-text {
  display: block;
  margin: 0px 0px 12px;
  color: #006B3A;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15.7472px;
  font-weight: 700;
  line-height: 23.6208px;
  text-align: center;
}

.c-header__group-6 {
  display: block;
  margin: 16px auto;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #E6E6E6;
  color: #E6E6E6;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #E6E6E6;
}

.c-header__group-7 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  height: 32px;
}

.c-header__group-8 {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  box-sizing: border-box;
}

.c-header__text {
  display: block;
  margin: 0px;
  font-family: tablet-gothic-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15.7472px;
  font-weight: 500;
  line-height: 23.6208px;
}

.c-header__group-9 {
  display: flex;
  align-items: center;
  width: 24px;
  height: 24px;
  position: relative;
  padding-left: 8px;
  margin-left: 8px;
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: #E6E6E6;
}

.c-header__group-10 {
  display: flex;
  align-items: center;
  margin: 0px;
  cursor: pointer;
  font-family: tablet-gothic-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
}

.c-header__inner-4 {
  display: block;
  flex-basis: calc(50% - 16px);
  min-width: calc(50% - 16px);
  max-width: calc(50% - 16px);
  position: relative;
}

.c-header__inner-4::before {
  content: "";
  display: block;
  width: 1px;
  height: 192px;
  position: absolute;
  top: 0px;
  right: 660.406px;
  bottom: 0px;
  left: -16px;
  background-color: #E6E6E6;
}

.c-header__group-11 {
  display: block;
  box-sizing: border-box;
  line-height: 0px;
}

.c-header__link {
  display: inline-block;
  color: #000000;
  cursor: pointer;
  text-decoration-line: none;
  text-align: center;
  transition: all 0.35s ease;
}

.c-header__link-image {
  display: inline-block;
  flex-shrink: 0;
  width: 581px;
  height: 93px;
  max-width: 650px;
  aspect-ratio: auto 646 / 103;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
}

.c-header__group-12 {
  display: block;
  margin: 0px;
  color: #676767;
  font-size: 17.1472px;
  line-height: 25.7208px;
  text-align: center;
}

.c-header__text-2 {
  display: inline;
  font-style: italic;
}

.c-header__group-13 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 32px;
  box-sizing: border-box;
  height: 32px;
}

.c-header__inner-5 {
  display: block;
  flex-basis: 100%;
  min-width: 100%;
  max-width: 100%;
}

.c-header__nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7.8736px;
  position: relative;
  font-family: tablet-gothic-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15.7472px;
  font-weight: 500;
  line-height: 23.6208px;
}

.c-header__nav-list {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  gap: 16px;
  padding: 0px;
  margin: 0px;
  position: relative;
  list-style-type: none;
}

.c-header__inner-6 {
  display: block;
  flex-basis: calc(25% - 24px);
  min-width: calc(25% - 24px);
  max-width: calc(25% - 24px);
  position: relative;
}

.c-header__inner-6::before {
  content: "";
  display: block;
  width: 1px;
  height: 192px;
  position: absolute;
  top: 0px;
  right: 321.703px;
  bottom: 0px;
  left: -16px;
  background-color: #E6E6E6;
}

.c-header__image {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 307px;
  height: 82px;
  max-width: 100%;
  aspect-ratio: auto 376 / 100;
  overflow-x: clip;
  overflow-y: clip;
  vertical-align: bottom;
  background-color: currentcolor;
  cursor: pointer;
}

.c-header__group-14 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 32px;
  position: relative;
}

.c-header__inner-7 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  max-width: 768px;
  margin-left: auto;
}

.c-header__group-15 {
  display: block;
  margin: 0px;
  font-family: tablet-gothic-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15.7472px;
  line-height: 23.6208px;
  white-space: nowrap;
  padding-right: 8px;
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: #E6E6E6;
}

.c-header__group-15::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 4px;
}

.c-header__link-2 {
  display: inline;
  color: #000000;
  cursor: pointer;
  text-decoration-line: none;
  transition: all 0.35s ease;
}

.c-header__nav-2 {
  display: flex;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  overflow-x: scroll;
  overflow-y: auto;
  white-space: nowrap;
  list-style-type: disc;
}

.c-header__item {
  display: block;
  color: #006B3A;
  border-radius: 9999px;
  transition: transform 0.1s ease;
}

.c-header__group-16 {
  display: block;
  height: 3px;
  overflow-x: hidden;
  overflow-y: hidden;
  color: #E6E6E6;
  margin-top: 16px;
  margin-right: auto;
  margin-left: auto;
  border-top-width: 2px;
  border-bottom-width: 1px;
  border-top-style: solid;
  border-bottom-style: solid;
  border-top-color: #E6E6E6;
  border-bottom-color: #E6E6E6;
}

.c-header__logo:hover {
  opacity: 0.5;
}

<div class="c-header-mobile-scope">
  <header class="c-header-mobile">
    <div class="c-header-mobile__group">
      <figure class="c-header-mobile__group-2">
        <span class="c-header-mobile__logo" aria-hidden="true"></span>
      </figure>
    </div>
    <div class="c-header-mobile__group-3">
      <div class="c-header-mobile__inner">
        <div class="c-header-mobile__group-4"></div>
      </div>
      <div class="c-header-mobile__inner-2">
        <div class="c-header-mobile__group-5">
          <div class="c-header-mobile__inner-3">
            <div class="c-header-mobile__group-6">
              <div class="c-header-mobile__group-7">
                <a class="c-header-mobile__link" href="#">
                  <span class="c-header-mobile__link-image" aria-hidden="true"></span>
                </a>
              </div>
              <p class="c-header-mobile__group-8">
                <em class="c-header-mobile__text">lorem ipsum dolor sit amet c</em>
              </p>
            </div>
            <div class="c-header-mobile__group-9"></div>
            <div class="c-header-mobile__group-10">
              <div class="c-header-mobile__inner-3">
                <div class="c-header-mobile__group-11">
                  <div class="c-header-mobile__group-12"></div>
                  <nav class="c-header-mobile__nav"></nav>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="c-header-mobile__group-13"></div>
      </div>
    </div>
  </header>
</div>

.c-header-mobile-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-header-mobile {
  display: block;
  border-spacing: 0px;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-header-mobile__group {
  display: block;
  box-sizing: border-box;
}

.c-header-mobile__group-2 {
  display: block;
  margin: 0px 0px 16px;
  cursor: pointer;
}

.c-header-mobile__logo {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 390px;
  height: 260px;
  max-width: 100%;
  aspect-ratio: auto 3000 / 2000;
  overflow-x: clip;
  overflow-y: clip;
  vertical-align: bottom;
  background-color: currentcolor;
}

.c-header-mobile__group-3 {
  display: block;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  padding-right: 16px;
  padding-bottom: 16px;
  padding-left: 16px;
}

.c-header-mobile__inner {
  display: block;
  box-sizing: border-box;
  max-width: 1600px;
  margin-right: auto;
  margin-left: auto;
}

.c-header-mobile__group-4 {
  display: block;
  height: 16px;
}

.c-header-mobile__inner-2 {
  display: block;
  box-sizing: border-box;
  max-width: 1600px;
  padding-right: 16px;
  padding-left: 16px;
  margin-right: auto;
  margin-left: auto;
  border-right-width: 1px;
  border-left-width: 1px;
  border-right-style: solid;
  border-left-style: solid;
  border-right-color: #E6E6E6;
  border-left-color: #E6E6E6;
}

.c-header-mobile__group-5 {
  display: flex;
  flex-wrap: wrap;
  column-gap: 32px;
  box-sizing: border-box;
}

.c-header-mobile__inner-3 {
  display: block;
  flex-basis: 100%;
  min-width: 100%;
  max-width: 100%;
}

.c-header-mobile__group-6 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
}

.c-header-mobile__group-7 {
  display: block;
  box-sizing: border-box;
  line-height: 0px;
}

.c-header-mobile__link {
  display: inline-block;
  color: #000000;
  cursor: pointer;
  text-decoration-line: none;
  text-align: center;
  transition: all 0.35s ease;
}

.c-header-mobile__link-image {
  display: inline-block;
  flex-shrink: 0;
  width: 260px;
  height: 41px;
  max-width: 650px;
  aspect-ratio: auto 646 / 103;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
}

.c-header-mobile__group-8 {
  display: block;
  margin: 0px;
  color: #676767;
  font-size: 14.1967px;
  line-height: 21.2951px;
  text-align: center;
}

.c-header-mobile__text {
  display: inline;
  font-style: italic;
}

.c-header-mobile__group-9 {
  display: block;
  margin: 16px auto;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #E6E6E6;
  color: #E6E6E6;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #E6E6E6;
}

.c-header-mobile__group-10 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 32px;
  box-sizing: border-box;
  height: 32px;
}

.c-header-mobile__group-11 {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px;
  box-sizing: border-box;
}

.c-header-mobile__group-12 {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  box-sizing: border-box;
}

.c-header-mobile__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10.6951px;
  position: relative;
  font-family: tablet-gothic-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 21.3902px;
  font-weight: 500;
  line-height: 32.0853px;
}

.c-header-mobile__group-13 {
  display: block;
  height: 3px;
  overflow-x: hidden;
  overflow-y: hidden;
  color: #E6E6E6;
  margin-top: 16px;
  margin-right: auto;
  margin-left: auto;
  border-top-width: 2px;
  border-bottom-width: 1px;
  border-top-style: solid;
  border-bottom-style: solid;
  border-top-color: #E6E6E6;
  border-bottom-color: #E6E6E6;
}

<div class="c-footer-scope">
  <footer class="c-footer">
    <div class="c-footer__group"></div>
    <div class="c-footer__group-2">
      <div class="c-footer__inner">
        <div class="c-footer__group-3">
          <div class="c-footer__inner-2">
            <figure class="c-footer__group-4">
              <span class="c-footer__logo" aria-hidden="true"></span>
            </figure>
            <div class="c-footer__group-5"></div>
          </div>
        </div>
        <div class="c-footer__columns">
          <div class="c-footer__column">
            <div class="c-footer__group-6">
              <p class="c-footer__text">lorem ipsum dolor sit amet consec</p>
              <ul class="c-footer__list">
                <li class="c-footer__item"></li>
              </ul>
            </div>
            <div class="c-footer__group-5"></div>
            <div class="c-footer__group-6">
              <p class="c-footer__text">lorem ipsum dolor sit amet consectetur</p>
              <div class="c-footer__group-7"></div>
            </div>
          </div>
          <div class="c-footer__column-2">
            <div class="c-footer__columns-2">
              <div class="c-footer__inner-3">
                <h2 class="c-footer__heading">lorem ip</h2>
                <nav class="c-footer__nav">
                  <ul class="c-footer__list-2"></ul>
                </nav>
              </div>
              <div class="c-footer__inner-3">
                <h2 class="c-footer__heading">lorem i</h2>
                <nav class="c-footer__nav-2">
                  <ul class="c-footer__list-3"></ul>
                </nav>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="c-footer__inner-4"></div>
      <div class="c-footer__group-8"></div>
      <div class="c-footer__inner">
        <div class="c-footer__columns-3">
          <div class="c-footer__inner-3">
            <div class="c-footer__columns-4">
              <p class="c-footer__text-2">lorem</p>
              <p class="c-footer__text-3">lorem ips</p>
              <p class="c-footer__text-4">lorem ipsum do</p>
              <p class="c-footer__text-4">lorem ipsum d</p>
              <p class="c-footer__text-4">lorem ipsum</p>
              <p class="c-footer__text-4">lore</p>
              <p class="c-footer__text-2">lorem ipsum dolor sit</p>
            </div>
          </div>
          <div class="c-footer__inner-3">
            <ul class="c-footer__list-4">
              <li class="c-footer__item-2">
                <a class="c-footer__link" href="#">
                  <span class="c-footer__link-icon" aria-hidden="true"></span>
                  <span class="c-footer__text-5">lorem ips</span>
                </a>
              </li>
              <li class="c-footer__item-2">
                <a class="c-footer__link" href="#">
                  <span class="c-footer__link-icon" aria-hidden="true"></span>
                  <span class="c-footer__text-5">lorem ip</span>
                </a>
              </li>
              <li class="c-footer__item-2">
                <a class="c-footer__link" href="#">
                  <span class="c-footer__link-icon" aria-hidden="true"></span>
                  <span class="c-footer__text-5">lorem i</span>
                </a>
              </li>
              <li class="c-footer__item-2">
                <a class="c-footer__link" href="#">
                  <span class="c-footer__link-icon" aria-hidden="true"></span>
                  <span class="c-footer__text-5">lorem</span>
                </a>
              </li>
              <li class="c-footer__item-2">
                <a class="c-footer__link" href="#">
                  <span class="c-footer__link-icon" aria-hidden="true"></span>
                  <span class="c-footer__text-5">lorem i</span>
                </a>
              </li>
              <li class="c-footer__item-2">
                <a class="c-footer__link" href="#">
                  <span class="c-footer__link-icon" aria-hidden="true"></span>
                  <span class="c-footer__text-5">lorem</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </footer>
</div>

.c-footer-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-footer {
  display: block;
  border-spacing: 0px;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-footer__group {
  display: block;
  height: 64px;
}

.c-footer__group-2 {
  display: block;
  box-sizing: border-box;
  padding: 16px 28.8px 32px;
  background-color: #000000;
}

.c-footer__inner {
  display: block;
  box-sizing: border-box;
  max-width: 1600px;
  margin-right: auto;
  margin-left: auto;
}

.c-footer__group-3 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: 32px;
  box-sizing: border-box;
}

.c-footer__inner-2 {
  display: block;
  flex-basis: 100%;
  min-width: 100%;
  max-width: 100%;
}

.c-footer__group-4 {
  display: block;
  width: 100%;
  margin: 0px 0px 16px;
  text-align: center;
}

.c-footer__logo {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 786px;
  height: 131px;
  max-width: 100%;
  aspect-ratio: auto 786 / 131;
  overflow-x: clip;
  overflow-y: clip;
  vertical-align: bottom;
  background-color: currentcolor;
  cursor: pointer;
}

.c-footer__group-5 {
  display: block;
  height: 32px;
}

.c-footer__columns {
  display: flex;
  flex-wrap: wrap;
  column-gap: 32px;
  box-sizing: border-box;
}

.c-footer__column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-basis: calc(41.6667% - 18.6667px);
  min-width: calc(41.6667% - 18.6667px);
  max-width: calc(41.6667% - 18.6667px);
}

.c-footer__group-6 {
  display: block;
  box-sizing: border-box;
}

.c-footer__text {
  display: block;
  margin: 0px 0px 12px;
  color: #FFFFFF;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15.7472px;
  font-weight: 700;
  line-height: 23.6208px;
  text-transform: uppercase;
  text-align: left;
}

.c-footer__list {
  display: block;
  box-sizing: border-box;
  max-width: 100%;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-footer__item {
  display: list-item;
}

.c-footer__group-7 {
  display: flex;
  gap: 8px;
  box-sizing: border-box;
}

.c-footer__column-2 {
  display: block;
  flex-basis: calc(33.3333% - 21.3333px);
  min-width: calc(33.3333% - 21.3333px);
  max-width: calc(33.3333% - 21.3333px);
  margin-left: calc(25% + 8px);
}

.c-footer__columns-2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: 32px;
  box-sizing: border-box;
}

.c-footer__inner-3 {
  display: block;
  flex-basis: calc(50% - 16px);
  min-width: calc(50% - 16px);
  max-width: calc(50% - 16px);
}

.c-footer__heading {
  display: block;
  margin: 0px 0px 16px;
  color: #FFFFFF;
  font-family: rocky-compressed, Georgia, Times, "Times New Roman", serif;
  font-size: 36.7472px;
  font-weight: 800;
  line-height: 40.4219px;
  text-align: left;
}

.c-footer__nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  color: #FFFFFF;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 20.3792px;
  line-height: 30.5688px;
}

.c-footer__list-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-grow: 1;
  gap: 16px;
  width: 100%;
  padding: 0px;
  margin: 0px;
  position: relative;
  list-style-type: none;
}

.c-footer__nav-2 {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  color: #FFFFFF;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 20.3792px;
  line-height: 30.5688px;
}

.c-footer__list-3 {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  flex-grow: 1;
  gap: 16px;
  width: 100%;
  padding: 0px;
  margin: 0px;
  position: relative;
  list-style-type: none;
}

.c-footer__inner-4 {
  display: block;
  height: 32px;
  max-width: 768px;
  margin-right: auto;
  margin-left: auto;
}

.c-footer__group-8 {
  display: block;
  margin: 12px -28.8px 32px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #FFFFFF26;
  color: #FFFFFF26;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #FFFFFF26;
}

.c-footer__columns-3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 32px;
  box-sizing: border-box;
}

.c-footer__columns-4 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
}

.c-footer__text-2 {
  display: block;
  margin: 0px;
  color: #FFFFFF;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13.376px;
  line-height: 20.064px;
  text-align: left;
}

.c-footer__text-3 {
  display: block;
  margin: 0px 0px 0px -4px;
  color: #FFFFFF;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13.376px;
  line-height: 13.376px;
  text-align: left;
  padding-right: 8px;
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: #FFFFFF;
}

.c-footer__text-4 {
  display: block;
  margin: 0px;
  color: #FFFFFF;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13.376px;
  line-height: 13.376px;
  text-align: left;
  padding-right: 8px;
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: #FFFFFF;
}

.c-footer__list-4 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: disc;
}

.c-footer__item-2 {
  display: block;
  background-color: #000000;
  color: #FFFFFF;
  border: 1px solid #006B3A;
  transition: transform 0.1s ease;
}

.c-footer__link {
  display: flex;
  align-items: center;
  padding: 4px;
  color: #FFFFFF;
  cursor: pointer;
  line-height: 0px;
  text-decoration-line: none;
  transition: all 0.35s ease;
}

.c-footer__link-icon {
  display: block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-footer__text-5 {
  display: block;
  width: 1px;
  height: 1px;
  margin: -1px;
  position: absolute;
  overflow-x: hidden;
  overflow-y: hidden;
}

<div class="c-footer-mobile-scope">
  <footer class="c-footer-mobile">
    <div class="c-footer-mobile__group"></div>
    <div class="c-footer-mobile__group-2">
      <div class="c-footer-mobile__inner">
        <div class="c-footer-mobile__group-3">
          <div class="c-footer-mobile__inner-2">
            <figure class="c-footer-mobile__group-4">
              <span class="c-footer-mobile__logo" aria-hidden="true"></span>
            </figure>
            <div class="c-footer-mobile__group"></div>
          </div>
        </div>
        <div class="c-footer-mobile__columns">
          <div class="c-footer-mobile__column">
            <div class="c-footer-mobile__group-5">
              <p class="c-footer-mobile__text">lorem ipsum dolor sit amet consec</p>
              <ul class="c-footer-mobile__list">
                <li class="c-footer-mobile__item"></li>
              </ul>
            </div>
            <div class="c-footer-mobile__group"></div>
            <div class="c-footer-mobile__group-5">
              <p class="c-footer-mobile__text">lorem ipsum dolor sit amet consectetur</p>
              <div class="c-footer-mobile__group-6"></div>
            </div>
            <div class="c-footer-mobile__group"></div>
          </div>
          <div class="c-footer-mobile__column-2">
            <div class="c-footer-mobile__columns">
              <div class="c-footer-mobile__column-2">
                <h2 class="c-footer-mobile__heading">lorem ip</h2>
                <nav class="c-footer-mobile__nav">
                  <ul class="c-footer-mobile__list-2"></ul>
                </nav>
                <div class="c-footer-mobile__group"></div>
              </div>
              <div class="c-footer-mobile__column-2">
                <h2 class="c-footer-mobile__heading">lorem i</h2>
                <nav class="c-footer-mobile__nav-2">
                  <ul class="c-footer-mobile__list-3"></ul>
                </nav>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="c-footer-mobile__inner-3"></div>
      <div class="c-footer-mobile__group-7"></div>
      <div class="c-footer-mobile__inner">
        <div class="c-footer-mobile__columns">
          <div class="c-footer-mobile__column-2">
            <div class="c-footer-mobile__columns-2">
              <p class="c-footer-mobile__text-2">lorem</p>
              <p class="c-footer-mobile__text-3">lorem ips</p>
              <p class="c-footer-mobile__text-4">lorem ipsum do</p>
              <p class="c-footer-mobile__text-4">lorem ipsum d</p>
              <p class="c-footer-mobile__text-4">lorem ipsum</p>
              <p class="c-footer-mobile__text-4">lore</p>
              <p class="c-footer-mobile__text-2">lorem ipsum dolor sit</p>
            </div>
            <div class="c-footer-mobile__group"></div>
          </div>
          <div class="c-footer-mobile__column-2">
            <ul class="c-footer-mobile__list-4">
              <li class="c-footer-mobile__item-2">
                <a class="c-footer-mobile__link" href="#">
                  <span class="c-footer-mobile__link-icon" aria-hidden="true"></span>
                  <span class="c-footer-mobile__text-5">lorem ips</span>
                </a>
              </li>
              <li class="c-footer-mobile__item-2">
                <a class="c-footer-mobile__link" href="#">
                  <span class="c-footer-mobile__link-icon" aria-hidden="true"></span>
                  <span class="c-footer-mobile__text-5">lorem ip</span>
                </a>
              </li>
              <li class="c-footer-mobile__item-2">
                <a class="c-footer-mobile__link" href="#">
                  <span class="c-footer-mobile__link-icon" aria-hidden="true"></span>
                  <span class="c-footer-mobile__text-5">lorem i</span>
                </a>
              </li>
              <li class="c-footer-mobile__item-2">
                <a class="c-footer-mobile__link" href="#">
                  <span class="c-footer-mobile__link-icon" aria-hidden="true"></span>
                  <span class="c-footer-mobile__text-5">lorem</span>
                </a>
              </li>
              <li class="c-footer-mobile__item-2">
                <a class="c-footer-mobile__link" href="#">
                  <span class="c-footer-mobile__link-icon" aria-hidden="true"></span>
                  <span class="c-footer-mobile__text-5">lorem i</span>
                </a>
              </li>
              <li class="c-footer-mobile__item-2">
                <a class="c-footer-mobile__link" href="#">
                  <span class="c-footer-mobile__link-icon" aria-hidden="true"></span>
                  <span class="c-footer-mobile__text-5">lorem</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="c-footer-mobile__inner-4">
        <div class="c-footer-mobile__group"></div>
        <figure class="c-footer-mobile__group-8">
          <span class="c-footer-mobile__image" aria-hidden="true"></span>
        </figure>
      </div>
    </div>
  </footer>
</div>

.c-footer-mobile-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-footer-mobile {
  display: block;
  border-spacing: 0px;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-footer-mobile__group {
  display: block;
  height: 32px;
}

.c-footer-mobile__group-2 {
  display: block;
  box-sizing: border-box;
  padding: 16px 16px 32px;
  background-color: #000000;
}

.c-footer-mobile__inner {
  display: block;
  box-sizing: border-box;
  max-width: 1600px;
  margin-right: auto;
  margin-left: auto;
}

.c-footer-mobile__group-3 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: 32px;
  box-sizing: border-box;
}

.c-footer-mobile__inner-2 {
  display: block;
  flex-basis: 100%;
  min-width: 100%;
  max-width: 100%;
}

.c-footer-mobile__group-4 {
  display: block;
  width: 100%;
  margin: 0px 0px 16px;
  text-align: center;
}

.c-footer-mobile__logo {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 358px;
  height: 60px;
  max-width: 100%;
  aspect-ratio: auto 786 / 131;
  overflow-x: clip;
  overflow-y: clip;
  vertical-align: bottom;
  background-color: currentcolor;
  cursor: pointer;
}

.c-footer-mobile__columns {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: 32px;
  box-sizing: border-box;
}

.c-footer-mobile__column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-basis: 100%;
  min-width: 100%;
  max-width: 100%;
}

.c-footer-mobile__group-5 {
  display: block;
  box-sizing: border-box;
}

.c-footer-mobile__text {
  display: block;
  margin: 0px 0px 12px;
  color: #FFFFFF;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14.1092px;
  font-weight: 700;
  line-height: 21.1638px;
  text-transform: uppercase;
  text-align: center;
}

.c-footer-mobile__list {
  display: block;
  box-sizing: border-box;
  max-width: 100%;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-footer-mobile__item {
  display: list-item;
}

.c-footer-mobile__group-6 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
}

.c-footer-mobile__column-2 {
  display: block;
  flex-basis: 100%;
  min-width: 100%;
  max-width: 100%;
}

.c-footer-mobile__heading {
  display: block;
  margin: 0px 0px 16px;
  color: #FFFFFF;
  font-family: rocky-compressed, Georgia, Times, "Times New Roman", serif;
  font-size: 28.5467px;
  font-weight: 800;
  line-height: 31.4014px;
  text-align: center;
}

.c-footer-mobile__nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  color: #FFFFFF;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16.2737px;
  line-height: 24.4106px;
}

.c-footer-mobile__list-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
  gap: 16px;
  width: 100%;
  padding: 0px;
  margin: 0px;
  position: relative;
  list-style-type: none;
}

.c-footer-mobile__nav-2 {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  color: #FFFFFF;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16.2737px;
  line-height: 24.4106px;
}

.c-footer-mobile__list-3 {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  flex-grow: 1;
  gap: 16px;
  width: 100%;
  padding: 0px;
  margin: 0px;
  position: relative;
  list-style-type: none;
}

.c-footer-mobile__inner-3 {
  display: block;
  height: 32px;
  max-width: 768px;
  margin-right: auto;
  margin-left: auto;
}

.c-footer-mobile__group-7 {
  display: block;
  margin: 12px -16px 32px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #FFFFFF26;
  color: #FFFFFF26;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #FFFFFF26;
}

.c-footer-mobile__columns-2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
}

.c-footer-mobile__text-2 {
  display: block;
  margin: 0px;
  color: #FFFFFF;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 9.281px;
  line-height: 13.9215px;
  text-align: center;
}

.c-footer-mobile__text-3 {
  display: block;
  margin: 0px 0px 0px -4px;
  color: #FFFFFF;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 9.281px;
  line-height: 9.281px;
  text-align: center;
  padding-right: 8px;
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: #FFFFFF;
}

.c-footer-mobile__text-4 {
  display: block;
  margin: 0px;
  color: #FFFFFF;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 9.281px;
  line-height: 9.281px;
  text-align: center;
  padding-right: 8px;
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: #FFFFFF;
}

.c-footer-mobile__list-4 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: disc;
}

.c-footer-mobile__item-2 {
  display: block;
  background-color: #000000;
  color: #FFFFFF;
  border: 1px solid #006B3A;
  transition: transform 0.1s ease;
}

.c-footer-mobile__link {
  display: flex;
  align-items: center;
  padding: 4px;
  color: #FFFFFF;
  cursor: pointer;
  line-height: 0px;
  text-decoration-line: none;
  transition: all 0.35s ease;
}

.c-footer-mobile__link-icon {
  display: block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-footer-mobile__text-5 {
  display: block;
  width: 1px;
  height: 1px;
  margin: -1px;
  position: absolute;
  overflow-x: hidden;
  overflow-y: hidden;
}

.c-footer-mobile__inner-4 {
  display: block;
  box-sizing: border-box;
  max-width: 768px;
  margin-right: auto;
  margin-left: auto;
}

.c-footer-mobile__group-8 {
  display: block;
  margin: 0px 0px 16px;
}

.c-footer-mobile__image {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 358px;
  height: 88px;
  max-width: 100%;
  aspect-ratio: auto 1024 / 251;
  overflow-x: clip;
  overflow-y: clip;
  vertical-align: bottom;
  background-color: currentcolor;
  cursor: pointer;
}

<div class="c-section-heading-scope">
  <header class="c-section-heading">
    <div class="c-section-heading__group">
      <div class="c-section-heading__group-2">
        <h1 class="c-section-heading__title">lore</h1>
      </div>
    </div>
    <div class="c-section-heading__group-3"></div>
    <div class="c-section-heading__group-4"></div>
  </header>
</div>

.c-section-heading-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-section-heading {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-section-heading__group {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: 32px;
  box-sizing: border-box;
}

.c-section-heading__group-2 {
  display: block;
  flex-basis: 100%;
  min-width: 100%;
  max-width: 100%;
}

.c-section-heading__title {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  font-family: rocky-compressed, Georgia, Times, "Times New Roman", serif;
  font-size: 85.1232px;
  font-weight: 700;
  line-height: 93.6355px;
  text-align: center;
}

.c-section-heading__group-3 {
  display: block;
  height: 3px;
  overflow-x: hidden;
  overflow-y: hidden;
  color: #E6E6E6;
  margin-top: 12px;
  margin-right: auto;
  margin-left: auto;
  border-top-width: 2px;
  border-bottom-width: 1px;
  border-top-style: solid;
  border-bottom-style: solid;
  border-top-color: #E6E6E6;
  border-bottom-color: #E6E6E6;
}

.c-section-heading__group-4 {
  display: block;
  height: 32px;
}

<div class="c-pagination-scope">
  <nav class="c-pagination">
    <div class="c-pagination__group">
      <span class="c-pagination__text-active">l</span>
      <a class="c-pagination__cta" href="#">l</a>
      <a class="c-pagination__cta" href="#">l</a>
      <span class="c-pagination__text">l</span>
      <a class="c-pagination__cta" href="#">lor</a>
    </div>
    <a class="c-pagination__link" href="#">lore</a>
  </nav>
</div>

.c-pagination-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  border-spacing: 0px;
  color: #006B3A;
  font-family: tablet-gothic-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 21px;
}

.c-pagination__group {
  display: flex;
  justify-content: flex-end;
  flex-grow: 1;
  gap: 8px;
}

.c-pagination__text-active {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  background-color: #006B3A;
  color: #FFFFFF;
  transition: all 0.35s ease;
}

.c-pagination__cta {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  background-color: #E6E6E6;
  color: #006B3A;
  cursor: pointer;
  text-decoration-line: none;
  transition: all 0.35s ease;
}

.c-pagination__text {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  background-color: #E6E6E6;
  transition: all 0.35s ease;
}

.c-pagination__link {
  display: block;
  flex-grow: 1;
  flex-basis: 0%;
  color: #006B3A;
  cursor: pointer;
  text-decoration-line: none;
  text-align: right;
  transition: all 0.35s ease;
}

<div class="c-checkbox-scope">
  <input class="c-checkbox" type="text" placeholder="l">
</div>

.c-checkbox-scope {
  background-color: #FEEB80;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 19.2px;
}

.c-checkbox {
  display: block;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  max-width: 100%;
  padding: 0px;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: #FFFFFF;
  color: #000000;
  border: 1px solid #000000;
  cursor: default;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13.3333px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  appearance: none;
  transition: all 0.35s ease-in-out;
  margin-top: 3px;
  margin-right: 3px;
  margin-left: 4px;
}

.c-checkbox:focus {
  min-width: 0px;
  min-height: 0px;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  border: 1px solid #006B3A;
}

<div class="c-tag-scope">
  <a class="c-tag" href="#">lorem</a>
</div>

.c-tag-scope {
  background-color: #FFFFFF;
  color: #006B3A;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.c-tag {
  display: inline-block;
  border-spacing: 0px;
  padding: 4px 16px;
  background-color: #006B3A;
  color: #FFFFFF;
  cursor: pointer;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  text-decoration-line: none;
  transition: all 0.35s ease;
}

<div class="c-consent-text-scope">
  <input class="c-consent-text" type="text" placeholder="l">
</div>

.c-consent-text-scope {
  background-color: #FEEB80;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 19.2px;
}

.c-consent-text {
  display: block;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  max-width: 100%;
  padding: 0px;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: #FFFFFF;
  color: #000000;
  border: 1px solid #000000;
  cursor: default;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13.3333px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  appearance: none;
  transition: all 0.35s ease-in-out;
  margin-top: 3px;
  margin-right: 3px;
  margin-left: 4px;
}

.c-consent-text:focus {
  min-width: 0px;
  min-height: 0px;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  border: 1px solid #006B3A;
}