Magentix Studioのデザインシステム

<div class="c-button-primary-scope">
  <a class="c-button-primary" href="#">lorem ipsum</a>
</div>

.c-button-primary-scope {
  background-color: #F8F8F9;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
}

.c-button-primary {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 12px 24px;
  background-color: #18181B;
  background-clip: padding-box;
  color: #FFFFFF;
  border: 1px solid transparent;
  border-radius: 15px;
  cursor: pointer;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 20.25px;
  letter-spacing: 0.075px;
  text-decoration-line: none;
  text-align: center;
  white-space: nowrap;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.c-button-primary:focus {
  border: 1px solid #A1A1A1;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #A1A1A180 0px 0px 0px 3px, transparent 0px 0px 0px 0px;
  outline: none;
}

<div class="c-button-secondary-scope">
  <a class="c-button-secondary" href="#">lorem ipsum</a>
</div>

.c-button-secondary-scope {
  background-color: #F8F8F9;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
}

.c-button-secondary {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 12px 24px;
  background-color: #18181B12;
  background-clip: padding-box;
  color: #18181B;
  border: 1px solid transparent;
  border-radius: 15px;
  backdrop-filter: blur(8px);
  cursor: pointer;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 20.25px;
  letter-spacing: 0.075px;
  text-decoration-line: none;
  text-align: center;
  white-space: nowrap;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-button-secondary:hover {
  background-color: #18181B24;
}

.c-button-secondary:focus {
  border: 1px solid #A1A1A1;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #A1A1A180 0px 0px 0px 3px, transparent 0px 0px 0px 0px;
  outline: none;
}

<div class="c-button-primary-2-scope">
  <a class="c-button-primary-2" href="#">lorem ipsum</a>
</div>

.c-button-primary-2-scope {
  background-color: #F8F8F9;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
}

.c-button-primary-2 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 12px 24px;
  background-color: #18181B;
  background-clip: padding-box;
  color: #FFFFFF;
  border: 1px solid transparent;
  border-radius: 15px;
  cursor: pointer;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 20.25px;
  letter-spacing: 0.075px;
  text-decoration-line: none;
  white-space: nowrap;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-button-primary-2:hover {
  opacity: 0.8;
}

.c-button-primary-2:focus {
  border: 1px solid #A1A1A1;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #A1A1A180 0px 0px 0px 3px, transparent 0px 0px 0px 0px;
  outline: none;
}

<div class="c-button-ghost-scope">
  <button class="c-button-ghost" type="button">
    <span class="c-button-ghost__icon" aria-hidden="true"></span>
  </button>
</div>

.c-button-ghost-scope {
  background-color: #DCDCE099;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
}

.c-button-ghost {
  display: inline-flex;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px 12px;
  background-color: transparent;
  color: #18181B;
  border: 0;
  border-radius: 15px;
  cursor: pointer;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

.c-button-ghost__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-button-ghost:focus {
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #42B5DC4D 0px 0px 0px 3px, transparent 0px 0px 0px 0px;
  outline: none;
}

<div class="c-card-scope">
  <div class="c-card">
    <div class="c-card__group">
      <span class="c-card__icon" aria-hidden="true"></span>
    </div>
    <h3 class="c-card__title">lorem ipsum dol</h3>
    <p class="c-card__body">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing eli</p>
  </div>
</div>

.c-card-scope {
  background-color: #F8F8F9;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
}

.c-card {
  display: inline-flex;
  flex-direction: column;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 32px;
  position: relative;
  background-color: #FFFFFF;
  color: #18181B;
  border-radius: 22px;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #0A0A0C0F 0px 4px 20px 0px;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
}

.c-card__group {
  display: flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
}

.c-card__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  background-color: currentcolor;
  transform: matrix3d(0.885139, -0.322726, 0.335226, -0.00465592, 0.156074, 0.884582, 0.439495, -0.0061041, -0.438371, -0.336694, 0.833347, -0.0115743, 0, 0, 0, 1);
}

.c-card__title {
  display: block;
  box-sizing: border-box;
  margin: 24px 0px 0px;
  font-family: Fraunces, "Fraunces Fallback", Georgia, serif;
  font-size: 24.9px;
  font-weight: 350;
  line-height: 27.39px;
  letter-spacing: -0.2px;
}

.c-card__body {
  display: block;
  flex-grow: 1;
  flex-basis: 0%;
  box-sizing: border-box;
  margin: 12px 0px 0px;
  color: #6B6B70;
  font-size: 16px;
  line-height: 22.4px;
}

<div class="c-card-2-scope">
  <div class="c-card-2">
    <div class="c-card-2__group">
      <div class="c-card-2__group-2">
        <span class="c-card-2__badge">lore</span>
        <h3 class="c-card-2__title">lorem ipsum dolor sit amet cons</h3>
        <p class="c-card-2__body">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lor</p>
      </div>
      <div class="c-card-2__group-3">
        <div class="c-card-2__group-4">
          <span class="c-card-2__media" aria-hidden="true"></span>
        </div>
        <div class="c-card-2__group-5">
          <div class="c-card-2__group-6"></div>
        </div>
      </div>
    </div>
  </div>
</div>

.c-card-2-scope {
  background-color: #F8F8F9;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
}

.c-card-2 {
  display: flex;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
}

.c-card-2__group {
  display: grid;
  align-items: center;
  gap: 48px;
  grid-template-columns: 280px 1fr;
  box-sizing: border-box;
  width: 100%;
  max-width: 1080px;
  padding-right: 24px;
  padding-left: 24px;
  margin-right: auto;
  margin-left: auto;
}

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

.c-card-2__badge {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  box-sizing: border-box;
  width: fit-content;
  padding: 4px 12px;
  background-color: #EDEDF0;
  border-radius: 15px;
  font-family: "Space Mono", "Space Mono Fallback", ui-monospace, monospace;
  font-size: 13px;
  line-height: 18.2px;
  letter-spacing: 0.075px;
  white-space: nowrap;
}

.c-card-2__title {
  display: block;
  box-sizing: border-box;
  margin: 16px 0px 0px;
  font-family: Fraunces, "Fraunces Fallback", Georgia, serif;
  font-size: 33px;
  font-weight: 350;
  line-height: 36.3px;
  letter-spacing: -0.33px;
}

.c-card-2__body {
  display: block;
  box-sizing: border-box;
  margin: 16px 0px 0px;
  color: #6B6B70;
  font-size: 16px;
  line-height: 22.4px;
}

.c-card-2__group-3 {
  display: block;
  box-sizing: border-box;
  height: 558px;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  border-radius: 64px;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #0A0A0C0F 0px 4px 20px 0px;
}

.c-card-2__group-4 {
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: -8%;
  right: -8%;
  bottom: -8%;
  left: -8%;
  transform: matrix(1.06, 0, 0, 1.06, 0, -16.1812);
}

.c-card-2__media {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 817px;
  height: 647px;
  max-width: 100%;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: clip;
  overflow-y: clip;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-card-2__group-5 {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 40px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

.c-card-2__group-6 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 448px;
  padding: 12px;
  background-color: #FFFFFF;
  border-radius: 24px;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #0A0A0C0F 0px 4px 20px 0px;
}

.c-card-2:focus {
  z-index: 5;
  transform: matrix(1, 0, 0, 1, 0, 0);
}

<div class="c-card-3-scope">
  <article class="c-card-3">
    <button class="c-card-3__button" type="button">
      <span class="c-card-3__icon" aria-hidden="true"></span>
    </button>
    <div class="c-card-3__group">
      <div class="c-card-3__group-2">
        <span class="c-card-3__text">lorem ipsum dol</span>
        <span class="c-card-3__text-2">lorem ipsum</span>
      </div>
      <h2 class="c-card-3__title">
        <span class="c-card-3__text-3">
          <span class="c-card-3__text-4">lorem i</span>
          <span class="c-card-3__text-4">lorem ipsum dol</span>
          <span class="c-card-3__text-4">lorem i</span>
        </span>
        <span class="c-card-3__group-3">
          <span class="c-card-3__group-4"></span>
          <span class="c-card-3__group-4"></span>
          <span class="c-card-3__group-4"></span>
          <span class="c-card-3__group-4"></span>
          <span class="c-card-3__group-4"></span>
          <span class="c-card-3__group-4"></span>
          <span class="c-card-3__group-4"></span>
          <span class="c-card-3__group-4"></span>
        </span>
      </h2>
      <p class="c-card-3__body">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dol</p>
    </div>
  </article>
</div>

.c-card-3-scope {
  background-color: #F8F8F9;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
}

.c-card-3 {
  display: inline-flex;
  flex-direction: column;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 12px;
  background-color: #FFFFFF;
  color: #18181B;
  border-radius: 22px;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #0A0A0C0F 0px 4px 20px 0px;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
}

.c-card-3__button {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  padding: 0px;
  position: relative;
  background-color: #EDEDF0;
  color: #18181B;
  border: 0;
  border-radius: 16px;
  cursor: pointer;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

.c-card-3__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 192px;
  height: 192px;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-card-3__group {
  display: block;
  box-sizing: border-box;
  padding: 20px 12px 12px;
}

.c-card-3__group-2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 12px;
  box-sizing: border-box;
}

.c-card-3__text {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  box-sizing: border-box;
  width: fit-content;
  padding: 4px 12px;
  background-color: #EDEDF0;
  border-radius: 15px;
  font-family: "Space Mono", "Space Mono Fallback", ui-monospace, monospace;
  font-size: 13px;
  line-height: 18.2px;
  letter-spacing: 0.075px;
  white-space: nowrap;
}

.c-card-3__text-2 {
  display: block;
  box-sizing: border-box;
  color: #6B6B70;
  font-family: "Space Mono", "Space Mono Fallback", ui-monospace, monospace;
  font-size: 13px;
  line-height: 18.2px;
  letter-spacing: 0.075px;
  white-space: nowrap;
}

.c-card-3__title {
  display: block;
  box-sizing: border-box;
  margin: 16px 0px 0px;
  font-size: 17px;
  font-weight: 400;
}

.c-card-3__text-3 {
  display: block;
  box-sizing: border-box;
  width: 1px;
  height: 1px;
  margin: -1px;
  position: absolute;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
}

.c-card-3__group-3 {
  display: flex;
  gap: 4px;
  box-sizing: border-box;
}

.c-card-3__group-4 {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 28px;
  height: 38px;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #EDEDF0;
  border-radius: 7px;
  font-family: "Space Mono", "Space Mono Fallback", ui-monospace, monospace;
  font-size: 19px;
  line-height: 26.6px;
}

.c-card-3__body {
  display: block;
  box-sizing: border-box;
  margin: 12px 0px 0px;
  color: #6B6B70;
  font-size: 15px;
  line-height: 22.5px;
}

<div class="c-navigation-scope">
  <nav class="c-navigation">
    <div class="c-navigation__group">
      <div class="c-navigation__group-2">
        <a class="c-navigation__link" href="#">
          <span class="c-navigation__icon" aria-hidden="true"></span>
        </a>
        <a class="c-navigation__link-2" href="#">lore</a>
        <a class="c-navigation__link-2" href="#">lore</a>
        <a class="c-navigation__link-2" href="#">lorem i</a>
        <div class="c-navigation__group-3">
          <button class="c-navigation__button" type="button"></button>
        </div>
      </div>
    </div>
  </nav>
</div>

.c-navigation-scope {
  background-color: #F8F8F9;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
}

.c-navigation {
  display: flex;
  justify-content: center;
  border-spacing: 0px;
  box-sizing: border-box;
  position: fixed;
  top: 16px;
  right: 0px;
  left: 0px;
  z-index: 20;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
  padding-right: 24px;
  padding-left: 24px;
}

.c-navigation__group {
  display: block;
  box-sizing: border-box;
  padding: 8px;
  background-color: #DCDCE099;
  border-radius: 22px;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #0A0A0C0F 0px 4px 20px 0px;
  backdrop-filter: blur(24px) saturate(1.5);
}

.c-navigation__group-2 {
  display: flex;
  gap: 2px;
  box-sizing: border-box;
  position: relative;
}

.c-navigation__link {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 10px 16px;
  position: relative;
  z-index: 2;
  color: #18181B;
  border-radius: 15px;
  cursor: pointer;
  font-family: "Space Grotesk", "Space Grotesk Fallback", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 22.4px;
  letter-spacing: -0.4px;
  text-decoration-line: none;
}

.c-navigation__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  vertical-align: middle;
  background-color: currentcolor;
  transform: matrix3d(0.913545, -0.139112, 0.382207, -0.00159253, 0, 0.939693, 0.34202, -0.00142508, -0.406737, -0.312451, 0.858452, -0.00357688, 0, 0, 0, 1);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.c-navigation__link-2 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 10px 16px;
  position: relative;
  z-index: 2;
  color: #18181B;
  border-radius: 15px;
  cursor: pointer;
  font-size: 15px;
  line-height: 21px;
  letter-spacing: 0.075px;
  text-decoration-line: none;
}

.c-navigation__group-3 {
  display: flex;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}

.c-navigation__button {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
  padding: 0px 12px;
  background-color: transparent;
  color: #18181B;
  border: 0;
  border-radius: 15px;
  cursor: pointer;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

<div class="c-theme-toggle-scope">
  <button class="c-theme-toggle" type="button">
    <span class="c-theme-toggle__icon" aria-hidden="true"></span>
  </button>
</div>

.c-theme-toggle-scope {
  background-color: #DCDCE099;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
}

.c-theme-toggle {
  display: inline-flex;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px 12px;
  background-color: transparent;
  color: #18181B;
  border: 0;
  border-radius: 15px;
  cursor: pointer;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

.c-theme-toggle__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-theme-toggle:focus {
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #42B5DC4D 0px 0px 0px 3px, transparent 0px 0px 0px 0px;
  outline: none;
}

<div class="c-header-landing-scope">
  <header class="c-header-landing">
    <div class="c-header-landing__group">
      <div class="c-header-landing__group-2"></div>
      <div class="c-header-landing__group-3">
        <h1 class="c-header-landing__logo">lorem ipsum dolor sit amet consectetur adip</h1>
        <div class="c-header-landing__group-4">
          <div class="c-header-landing__group-5">
            <div class="c-header-landing__inner">
              <span class="c-header-landing__text">lorem ipsum dolor</span>
              <em class="c-header-landing__text-2">lorem ipsum</em>
            </div>
            <p class="c-header-landing__inner-2">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectet</p>
          </div>
        </div>
        <div class="c-header-landing__group-6">
          <a class="c-header-landing__cta" href="#">lorem ipsum</a>
          <a class="c-header-landing__cta-2" href="#">lorem ipsum</a>
        </div>
      </div>
      <div class="c-header-landing__group-7">
        <div class="c-header-landing__group-8">
          <span class="c-header-landing__icon" aria-hidden="true"></span>
        </div>
      </div>
    </div>
  </header>
</div>

.c-header-landing-scope {
  background-color: #F8F8F9;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
}

.c-header-landing {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 2700px;
  position: relative;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
}

.c-header-landing__group {
  display: block;
  box-sizing: border-box;
  height: 900px;
  min-height: 560px;
  position: sticky;
  top: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
}

.c-header-landing__group-2 {
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: #F8F8F9;
}

.c-header-landing__group-3 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 303.75px;
  left: 0px;
  z-index: 10;
  text-align: center;
  padding-top: 80px;
  padding-right: 24px;
  padding-left: 24px;
}

.c-header-landing__logo {
  display: block;
  box-sizing: border-box;
  width: 1px;
  height: 1px;
  margin: -1px;
  position: absolute;
  overflow-x: hidden;
  overflow-y: hidden;
  font-size: 17px;
  font-weight: 400;
  white-space: nowrap;
}

.c-header-landing__group-4 {
  display: grid;
  box-sizing: border-box;
}

.c-header-landing__group-5 {
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  transition: all 0.5s cubic-bezier(0, 0, 0.2, 1);
}

.c-header-landing__inner {
  display: block;
  box-sizing: border-box;
  max-width: 702.089px;
  font-family: Fraunces, "Fraunces Fallback", Georgia, serif;
  font-size: 72px;
  font-weight: 350;
  line-height: 79.2px;
  letter-spacing: -1.3px;
  margin-right: auto;
  margin-left: auto;
}

.c-header-landing__text-2 {
  display: inline;
  box-sizing: border-box;
  font-style: italic;
}

.c-header-landing__inner-2 {
  display: block;
  box-sizing: border-box;
  max-width: 430.08px;
  margin: 24px auto 0px;
  color: #18181BB3;
  font-size: 19.2px;
  line-height: 24.96px;
  letter-spacing: 0.096px;
}

.c-header-landing__group-6 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  box-sizing: border-box;
  margin-top: 32px;
}

.c-header-landing__cta {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 12px 24px;
  background-color: #18181B;
  background-clip: padding-box;
  color: #FFFFFF;
  border: 1px solid transparent;
  border-radius: 15px;
  cursor: pointer;
  font-size: 15px;
  line-height: 20.25px;
  letter-spacing: 0.075px;
  text-decoration-line: none;
  white-space: nowrap;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-header-landing__cta-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 12px 24px;
  background-color: #18181B12;
  background-clip: padding-box;
  color: #18181B;
  border: 1px solid transparent;
  border-radius: 15px;
  backdrop-filter: blur(8px);
  cursor: pointer;
  font-size: 15px;
  line-height: 20.25px;
  letter-spacing: 0.075px;
  text-decoration-line: none;
  white-space: nowrap;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-header-landing__group-7 {
  display: block;
  box-sizing: border-box;
  width: 1350px;
  position: absolute;
  bottom: 0px;
  left: 50%;
  overflow-x: hidden;
  overflow-y: hidden;
}

.c-header-landing__group-8 {
  display: block;
  box-sizing: border-box;
  width: 1350px;
  position: relative;
  left: 50%;
}

.c-header-landing__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 1350px;
  height: 341px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-header-landing__cta:hover {
  opacity: 0.85;
}

.c-header-landing__cta:focus {
  border: 1px solid #A1A1A1;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #A1A1A180 0px 0px 0px 3px, transparent 0px 0px 0px 0px;
  outline: none;
}

.c-header-landing__cta-2:hover {
  background-color: #18181B24;
}

.c-header-landing__cta-2:focus {
  border: 1px solid #A1A1A1;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #A1A1A180 0px 0px 0px 3px, transparent 0px 0px 0px 0px;
  outline: none;
}

<div class="c-header-landing-mobile-scope">
  <header class="c-header-landing-mobile">
    <div class="c-header-landing-mobile__group">
      <div class="c-header-landing-mobile__group-2"></div>
      <div class="c-header-landing-mobile__group-3">
        <h1 class="c-header-landing-mobile__logo">lorem ipsum dolor sit amet consectetur adip</h1>
        <div class="c-header-landing-mobile__group-4">
          <div class="c-header-landing-mobile__group-5">
            <div class="c-header-landing-mobile__inner">
              <span class="c-header-landing-mobile__text">lorem ipsum dolor</span>
              <em class="c-header-landing-mobile__text-2">lorem ipsum</em>
            </div>
            <p class="c-header-landing-mobile__inner-2">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectet</p>
          </div>
        </div>
        <div class="c-header-landing-mobile__group-6">
          <a class="c-header-landing-mobile__cta" href="#">lorem ipsum</a>
          <a class="c-header-landing-mobile__cta-2" href="#">lorem ipsum</a>
        </div>
      </div>
      <div class="c-header-landing-mobile__group-7">
        <div class="c-header-landing-mobile__group-8">
          <span class="c-header-landing-mobile__icon" aria-hidden="true"></span>
        </div>
      </div>
    </div>
  </header>
</div>

.c-header-landing-mobile-scope {
  background-color: #F8F8F9;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
}

.c-header-landing-mobile {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 2532px;
  position: relative;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
}

.c-header-landing-mobile__group {
  display: block;
  box-sizing: border-box;
  height: 844px;
  min-height: 560px;
  position: sticky;
  top: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
}

.c-header-landing-mobile__group-2 {
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: #F8F8F9;
}

.c-header-landing-mobile__group-3 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 202.5px;
  left: 0px;
  z-index: 10;
  text-align: center;
  padding-top: 80px;
  padding-right: 24px;
  padding-left: 24px;
}

.c-header-landing-mobile__logo {
  display: block;
  box-sizing: border-box;
  width: 1px;
  height: 1px;
  margin: -1px;
  position: absolute;
  overflow-x: hidden;
  overflow-y: hidden;
  font-size: 17px;
  font-weight: 400;
  white-space: nowrap;
}

.c-header-landing-mobile__group-4 {
  display: grid;
  box-sizing: border-box;
}

.c-header-landing-mobile__group-5 {
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  transition: all 0.5s cubic-bezier(0, 0, 0.2, 1);
}

.c-header-landing-mobile__inner {
  display: block;
  box-sizing: border-box;
  max-width: 361.963px;
  font-family: Fraunces, "Fraunces Fallback", Georgia, serif;
  font-size: 36px;
  font-weight: 350;
  line-height: 39.6px;
  letter-spacing: -1.3px;
  margin-right: auto;
  margin-left: auto;
}

.c-header-landing-mobile__text-2 {
  display: inline;
  box-sizing: border-box;
  font-style: italic;
}

.c-header-landing-mobile__inner-2 {
  display: block;
  box-sizing: border-box;
  max-width: 430.08px;
  margin: 24px auto 0px;
  color: #18181BB3;
  font-size: 19.2px;
  line-height: 24.96px;
  letter-spacing: 0.096px;
}

.c-header-landing-mobile__group-6 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  box-sizing: border-box;
  margin-top: 32px;
}

.c-header-landing-mobile__cta {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 12px 24px;
  background-color: #18181B;
  background-clip: padding-box;
  color: #FFFFFF;
  border: 1px solid transparent;
  border-radius: 15px;
  cursor: pointer;
  font-size: 15px;
  line-height: 20.25px;
  letter-spacing: 0.075px;
  text-decoration-line: none;
  white-space: nowrap;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-header-landing-mobile__cta-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 12px 24px;
  background-color: #18181B12;
  background-clip: padding-box;
  color: #18181B;
  border: 1px solid transparent;
  border-radius: 15px;
  backdrop-filter: blur(8px);
  cursor: pointer;
  font-size: 15px;
  line-height: 20.25px;
  letter-spacing: 0.075px;
  text-decoration-line: none;
  white-space: nowrap;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-header-landing-mobile__group-7 {
  display: block;
  box-sizing: border-box;
  width: 390px;
  position: absolute;
  bottom: 0px;
  left: 50%;
  overflow-x: hidden;
  overflow-y: hidden;
}

.c-header-landing-mobile__group-8 {
  display: block;
  box-sizing: border-box;
  width: 900px;
  position: relative;
  left: 50%;
}

.c-header-landing-mobile__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 900px;
  height: 227px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-header-landing-mobile__cta:hover {
  opacity: 0.85;
}

.c-header-landing-mobile__cta:focus {
  border: 1px solid #A1A1A1;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #A1A1A180 0px 0px 0px 3px, transparent 0px 0px 0px 0px;
  outline: none;
}

.c-header-landing-mobile__cta-2:hover {
  background-color: #18181B24;
}

.c-header-landing-mobile__cta-2:focus {
  border: 1px solid #A1A1A1;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #A1A1A180 0px 0px 0px 3px, transparent 0px 0px 0px 0px;
  outline: none;
}

<div class="c-header-inner-scope">
  <nav class="c-header-inner">
    <div class="c-header-inner__group">
      <div class="c-header-inner__group-2">
        <span class="c-header-inner__group-3"></span>
        <a class="c-header-inner__logo" href="#">
          <span class="c-header-inner__logo-icon" aria-hidden="true"></span>
          <span class="c-header-inner__inner">
            <span class="c-header-inner__logo-text">lorem ip</span>
            <span class="c-header-inner__logo-text-2">lorem</span>
          </span>
        </a>
        <a class="c-header-inner__link" href="#">lore</a>
        <a class="c-header-inner__link" href="#">lore</a>
        <a class="c-header-inner__link" href="#">lorem i</a>
        <div class="c-header-inner__group-4">
          <button class="c-header-inner__cta" type="button">
            <span class="c-header-inner__cta-icon" aria-hidden="true"></span>
          </button>
        </div>
      </div>
    </div>
  </nav>
</div>

.c-header-inner-scope {
  background-color: #F8F8F9;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
}

.c-header-inner {
  display: flex;
  justify-content: center;
  border-spacing: 0px;
  box-sizing: border-box;
  position: fixed;
  top: 16px;
  right: 0px;
  left: 0px;
  z-index: 20;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
  padding-right: 24px;
  padding-left: 24px;
}

.c-header-inner__group {
  display: block;
  box-sizing: border-box;
  padding: 8px;
  background-color: #DCDCE099;
  border-radius: 22px;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #0A0A0C0F 0px 4px 20px 0px;
  backdrop-filter: blur(24px) saturate(1.5);
}

.c-header-inner__group-2 {
  display: flex;
  gap: 2px;
  box-sizing: border-box;
  position: relative;
}

.c-header-inner__group-3 {
  display: block;
  box-sizing: border-box;
  width: 69px;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 188px;
  z-index: 1;
  background-color: #FFFFFF;
  border-radius: 15px;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #00000014 0px 0.98px 11.74px 0px;
}

.c-header-inner__logo {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 10px 16px;
  position: relative;
  z-index: 2;
  color: #18181B;
  border-radius: 15px;
  cursor: pointer;
  font-family: "Space Grotesk", "Space Grotesk Fallback", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 22.4px;
  letter-spacing: -0.4px;
  text-decoration-line: none;
}

.c-header-inner__logo-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  vertical-align: middle;
  background-color: currentcolor;
  transform: matrix3d(0.913545, -0.139112, 0.382207, -0.00159253, 0, 0.939693, 0.34202, -0.00142508, -0.406737, -0.312451, 0.858452, -0.00357688, 0, 0, 0, 1);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.c-header-inner__inner {
  display: block;
  box-sizing: border-box;
  max-width: 180px;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
  margin-left: 10px;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  transition-property: max-width, opacity, margin-left;
}

.c-header-inner__logo-text-2 {
  display: inline;
  box-sizing: border-box;
  color: #6B6B70;
}

.c-header-inner__link {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 10px 16px;
  position: relative;
  z-index: 2;
  color: #18181B;
  border-radius: 15px;
  cursor: pointer;
  font-size: 15px;
  line-height: 21px;
  letter-spacing: 0.075px;
  text-decoration-line: none;
}

.c-header-inner__group-4 {
  display: flex;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}

.c-header-inner__cta {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
  padding: 0px 12px;
  background-color: transparent;
  color: #18181B;
  border: 0;
  border-radius: 15px;
  cursor: pointer;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

.c-header-inner__cta-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-header-inner__logo:focus {
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #42B5DC4D 0px 0px 0px 3px, transparent 0px 0px 0px 0px;
  outline: none;
}

.c-header-inner__link:focus {
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #42B5DC4D 0px 0px 0px 3px, transparent 0px 0px 0px 0px;
  outline: none;
}

.c-header-inner__cta:focus {
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #42B5DC4D 0px 0px 0px 3px, transparent 0px 0px 0px 0px;
  outline: none;
}

<div class="c-header-inner-mobile-scope">
  <nav class="c-header-inner-mobile">
    <div class="c-header-inner-mobile__group">
      <div class="c-header-inner-mobile__group-2">
        <a class="c-header-inner-mobile__logo" href="#">
          <span class="c-header-inner-mobile__logo-icon" aria-hidden="true"></span>
          <span class="c-header-inner-mobile__inner">
            <span class="c-header-inner-mobile__logo-text">lorem ip</span>
            <span class="c-header-inner-mobile__logo-text-2">lorem</span>
          </span>
        </a>
        <button class="c-header-inner-mobile__menu-toggle" type="button">
          <span class="c-header-inner-mobile__group-3">
            <span class="c-header-inner-mobile__group-4"></span>
            <span class="c-header-inner-mobile__group-5"></span>
          </span>
        </button>
      </div>
    </div>
  </nav>
</div>

.c-header-inner-mobile-scope {
  background-color: #F8F8F9;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
}

.c-header-inner-mobile {
  display: flex;
  justify-content: center;
  border-spacing: 0px;
  box-sizing: border-box;
  position: fixed;
  top: 16px;
  right: 0px;
  left: 0px;
  z-index: 20;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
  padding-right: 24px;
  padding-left: 24px;
}

.c-header-inner-mobile__group {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 8px;
  background-color: #DCDCE099;
  border-radius: 22px;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #0A0A0C0F 0px 4px 20px 0px;
  backdrop-filter: blur(24px) saturate(1.5);
}

.c-header-inner-mobile__group-2 {
  display: flex;
  justify-content: space-between;
  gap: 2px;
  box-sizing: border-box;
  position: relative;
}

.c-header-inner-mobile__logo {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 10px 16px;
  position: relative;
  z-index: 2;
  color: #18181B;
  border-radius: 15px;
  cursor: pointer;
  font-family: "Space Grotesk", "Space Grotesk Fallback", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 22.4px;
  letter-spacing: -0.4px;
  text-decoration-line: none;
}

.c-header-inner-mobile__logo-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  vertical-align: middle;
  background-color: currentcolor;
  transform: matrix3d(0.913545, -0.139112, 0.382207, -0.00159253, 0, 0.939693, 0.34202, -0.00142508, -0.406737, -0.312451, 0.858452, -0.00357688, 0, 0, 0, 1);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.c-header-inner-mobile__inner {
  display: block;
  box-sizing: border-box;
  max-width: 180px;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
  margin-left: 10px;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  transition-property: max-width, opacity, margin-left;
}

.c-header-inner-mobile__logo-text-2 {
  display: inline;
  box-sizing: border-box;
  color: #6B6B70;
}

.c-header-inner-mobile__menu-toggle {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 10px 16px;
  position: relative;
  z-index: 2;
  background-color: transparent;
  color: #18181B;
  border: 0;
  border-radius: 15px;
  cursor: pointer;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: 0.075px;
  text-transform: none;
  text-align: center;
  appearance: button;
}

.c-header-inner-mobile__group-3 {
  display: block;
  box-sizing: border-box;
  width: 16px;
  height: 14px;
  position: relative;
}

.c-header-inner-mobile__group-4 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 1.6px;
  position: absolute;
  top: 3px;
  left: 0px;
  background-color: #18181B;
  border-radius: 3.35544e+07px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  transition-property: transform, translate, scale, rotate;
}

.c-header-inner-mobile__group-5 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 1.6px;
  position: absolute;
  bottom: 3px;
  left: 0px;
  background-color: #18181B;
  border-radius: 3.35544e+07px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  transition-property: transform, translate, scale, rotate;
}

.c-header-inner-mobile__logo:focus {
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #42B5DC4D 0px 0px 0px 3px, transparent 0px 0px 0px 0px;
  outline: none;
}

.c-header-inner-mobile__menu-toggle:focus {
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #42B5DC4D 0px 0px 0px 3px, transparent 0px 0px 0px 0px;
  outline: none;
}

<div class="c-footer-landing-scope">
  <footer class="c-footer-landing">
    <div class="c-footer-landing__columns">
      <div class="c-footer-landing__column">
        <p class="c-footer-landing__inner">lorem ipsum dolor sit amet consectetur adipiscing elit se</p>
        <a class="c-footer-landing__link" href="#">lorem ipsum</a>
      </div>
      <div class="c-footer-landing__column-2">
        <div class="c-footer-landing__group">
          <div class="c-footer-landing__text">lorem</div>
          <ul class="c-footer-landing__list">
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link-2" href="#">lore</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link-2" href="#">lore</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link-2" href="#">lorem i</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link-2" href="#">lorem i</a>
            </li>
            <li class="c-footer-landing__item-2">
              <a class="c-footer-landing__link-2" href="#">lorem i</a>
            </li>
          </ul>
        </div>
        <div class="c-footer-landing__group">
          <div class="c-footer-landing__text">lorem i</div>
          <ul class="c-footer-landing__list">
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link-2" href="#">l</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link-2" href="#">lorem ip</a>
            </li>
            <li class="c-footer-landing__item-2">
              <a class="c-footer-landing__link-2" href="#">lorem</a>
            </li>
          </ul>
        </div>
        <div class="c-footer-landing__group">
          <div class="c-footer-landing__text">lorem ip</div>
          <ul class="c-footer-landing__list">
            <li class="c-footer-landing__item-2">
              <a class="c-footer-landing__link-2" href="#">lorem ipsum dolor sit a</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="c-footer-landing__group-2">
      <span class="c-footer-landing__logo" aria-hidden="true"></span>
      <p class="c-footer-landing__text-2">lorem ipsum dolor sit amet consectetur adipi</p>
    </div>
  </footer>
</div>

.c-footer-landing-scope {
  background-color: #F8F8F9;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
}

.c-footer-landing {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
}

.c-footer-landing__columns {
  display: grid;
  gap: 80px;
  grid-template-columns: 1fr auto;
  box-sizing: border-box;
  width: 100%;
  max-width: 1080px;
  padding-right: 24px;
  padding-bottom: 96px;
  padding-left: 24px;
  margin-right: auto;
  margin-left: auto;
}

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

.c-footer-landing__inner {
  display: block;
  box-sizing: border-box;
  max-width: 421.05px;
  margin: 0px;
  font-family: Fraunces, "Fraunces Fallback", Georgia, serif;
  font-size: 42px;
  font-weight: 350;
  line-height: 46.2px;
  letter-spacing: -0.58px;
}

.c-footer-landing__link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 12px 24px;
  background-color: #18181B;
  background-clip: padding-box;
  color: #FFFFFF;
  border: 1px solid transparent;
  border-radius: 15px;
  cursor: pointer;
  font-size: 15px;
  line-height: 20.25px;
  letter-spacing: 0.075px;
  text-decoration-line: none;
  white-space: nowrap;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: 32px;
}

.c-footer-landing__column-2 {
  display: grid;
  gap: 40px 56px;
  grid-template-columns: repeat(3, minmax(0px, 1fr));
  box-sizing: border-box;
}

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

.c-footer-landing__text {
  display: block;
  box-sizing: border-box;
  color: #6B6B70;
  font-size: 14px;
  line-height: 19.6px;
}

.c-footer-landing__list {
  display: block;
  box-sizing: border-box;
  padding: 0px;
  margin: 16px 0px 0px;
  list-style-type: none;
}

.c-footer-landing__item {
  display: list-item;
  box-sizing: border-box;
  margin-bottom: 10px;
}

.c-footer-landing__link-2 {
  display: inline;
  box-sizing: border-box;
  color: #18181B;
  cursor: pointer;
  font-size: 15px;
  line-height: 21px;
  letter-spacing: 0.075px;
  text-decoration-line: none;
  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-footer-landing__item-2 {
  display: list-item;
  box-sizing: border-box;
}

.c-footer-landing__group-2 {
  display: block;
  box-sizing: border-box;
  text-align: center;
  padding-bottom: 56px;
}

.c-footer-landing__logo {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  vertical-align: middle;
  background-color: currentcolor;
  transform: matrix3d(0.913545, -0.139112, 0.382207, -0.00159253, 0, 0.939693, 0.34202, -0.00142508, -0.406737, -0.312451, 0.858452, -0.00357688, 0, 0, 0, 1);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  margin-right: 706px;
  margin-left: 706px;
}

.c-footer-landing__text-2 {
  display: block;
  box-sizing: border-box;
  margin: 20px 0px 0px;
  font-family: "Space Mono", "Space Mono Fallback", ui-monospace, monospace;
  font-size: 13px;
  line-height: 20.8px;
  letter-spacing: 0.075px;
}

.c-footer-landing__link:hover {
  opacity: 0.8;
}

.c-footer-landing__link:focus {
  border: 1px solid #A1A1A1;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #A1A1A180 0px 0px 0px 3px, transparent 0px 0px 0px 0px;
  outline: none;
}

.c-footer-landing__link-2:hover {
  opacity: 0.7;
}

<div class="c-footer-landing-mobile-scope">
  <footer class="c-footer-landing-mobile">
    <div class="c-footer-landing-mobile__columns">
      <div class="c-footer-landing-mobile__column">
        <p class="c-footer-landing-mobile__inner">lorem ipsum dolor sit amet consectetur adipiscing elit se</p>
        <a class="c-footer-landing-mobile__link" href="#">lorem ipsum</a>
      </div>
      <div class="c-footer-landing-mobile__column-2">
        <div class="c-footer-landing-mobile__group">
          <div class="c-footer-landing-mobile__text">lorem</div>
          <ul class="c-footer-landing-mobile__list">
            <li class="c-footer-landing-mobile__item">
              <a class="c-footer-landing-mobile__link-2" href="#">lore</a>
            </li>
            <li class="c-footer-landing-mobile__item">
              <a class="c-footer-landing-mobile__link-2" href="#">lore</a>
            </li>
            <li class="c-footer-landing-mobile__item">
              <a class="c-footer-landing-mobile__link-2" href="#">lorem i</a>
            </li>
            <li class="c-footer-landing-mobile__item">
              <a class="c-footer-landing-mobile__link-2" href="#">lorem i</a>
            </li>
            <li class="c-footer-landing-mobile__item-2">
              <a class="c-footer-landing-mobile__link-2" href="#">lorem i</a>
            </li>
          </ul>
        </div>
        <div class="c-footer-landing-mobile__group">
          <div class="c-footer-landing-mobile__text">lorem i</div>
          <ul class="c-footer-landing-mobile__list">
            <li class="c-footer-landing-mobile__item">
              <a class="c-footer-landing-mobile__link-2" href="#">l</a>
            </li>
            <li class="c-footer-landing-mobile__item">
              <a class="c-footer-landing-mobile__link-2" href="#">lorem ip</a>
            </li>
            <li class="c-footer-landing-mobile__item-2">
              <a class="c-footer-landing-mobile__link-2" href="#">lorem</a>
            </li>
          </ul>
        </div>
        <div class="c-footer-landing-mobile__group">
          <div class="c-footer-landing-mobile__text">lorem ip</div>
          <ul class="c-footer-landing-mobile__list">
            <li class="c-footer-landing-mobile__item-2">
              <a class="c-footer-landing-mobile__link-2" href="#">lorem ipsum dolor sit a</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="c-footer-landing-mobile__group-2">
      <span class="c-footer-landing-mobile__logo" aria-hidden="true"></span>
      <p class="c-footer-landing-mobile__text-2">lorem ipsum dolor sit amet consectetur adipi</p>
    </div>
  </footer>
</div>

.c-footer-landing-mobile-scope {
  background-color: #F8F8F9;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
}

.c-footer-landing-mobile {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
}

.c-footer-landing-mobile__columns {
  display: grid;
  gap: 56px;
  box-sizing: border-box;
  width: 100%;
  max-width: 1080px;
  padding-right: 24px;
  padding-bottom: 96px;
  padding-left: 24px;
  margin-right: auto;
  margin-left: auto;
}

.c-footer-landing-mobile__column {
  display: block;
  box-sizing: border-box;
}

.c-footer-landing-mobile__inner {
  display: block;
  box-sizing: border-box;
  max-width: 282.629px;
  margin: 0px;
  font-family: Fraunces, "Fraunces Fallback", Georgia, serif;
  font-size: 28px;
  font-weight: 350;
  line-height: 30.8px;
  letter-spacing: -0.58px;
}

.c-footer-landing-mobile__link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 12px 24px;
  background-color: #18181B;
  background-clip: padding-box;
  color: #FFFFFF;
  border: 1px solid transparent;
  border-radius: 15px;
  cursor: pointer;
  font-size: 15px;
  line-height: 20.25px;
  letter-spacing: 0.075px;
  text-decoration-line: none;
  white-space: nowrap;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: 32px;
}

.c-footer-landing-mobile__column-2 {
  display: grid;
  gap: 40px 56px;
  grid-template-columns: repeat(2, minmax(0px, 1fr));
  box-sizing: border-box;
}

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

.c-footer-landing-mobile__text {
  display: block;
  box-sizing: border-box;
  color: #6B6B70;
  font-size: 14px;
  line-height: 19.6px;
}

.c-footer-landing-mobile__list {
  display: block;
  box-sizing: border-box;
  padding: 0px;
  margin: 16px 0px 0px;
  list-style-type: none;
}

.c-footer-landing-mobile__item {
  display: list-item;
  box-sizing: border-box;
  margin-bottom: 10px;
}

.c-footer-landing-mobile__link-2 {
  display: inline;
  box-sizing: border-box;
  color: #18181B;
  cursor: pointer;
  font-size: 15px;
  line-height: 21px;
  letter-spacing: 0.075px;
  text-decoration-line: none;
  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-footer-landing-mobile__item-2 {
  display: list-item;
  box-sizing: border-box;
}

.c-footer-landing-mobile__group-2 {
  display: block;
  box-sizing: border-box;
  text-align: center;
  padding-bottom: 56px;
}

.c-footer-landing-mobile__logo {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  vertical-align: middle;
  background-color: currentcolor;
  transform: matrix3d(0.913545, -0.139112, 0.382207, -0.00159253, 0, 0.939693, 0.34202, -0.00142508, -0.406737, -0.312451, 0.858452, -0.00357688, 0, 0, 0, 1);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  margin-right: 181px;
  margin-left: 181px;
}

.c-footer-landing-mobile__text-2 {
  display: block;
  box-sizing: border-box;
  margin: 20px 0px 0px;
  font-family: "Space Mono", "Space Mono Fallback", ui-monospace, monospace;
  font-size: 13px;
  line-height: 20.8px;
  letter-spacing: 0.075px;
}

.c-footer-landing-mobile__link:hover {
  opacity: 0.8;
}

.c-footer-landing-mobile__link:focus {
  border: 1px solid #A1A1A1;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #A1A1A180 0px 0px 0px 3px, transparent 0px 0px 0px 0px;
  outline: none;
}

.c-footer-landing-mobile__link-2:hover {
  opacity: 0.7;
}

<div class="c-footer-inner-scope">
  <footer class="c-footer-inner">
    <div class="c-footer-inner__columns">
      <div class="c-footer-inner__column">
        <p class="c-footer-inner__inner">lorem ipsum dolor sit amet consectetur adipiscing elit se</p>
        <a class="c-footer-inner__cta" href="#">lorem ipsum</a>
      </div>
      <div class="c-footer-inner__column-2">
        <div class="c-footer-inner__group">
          <div class="c-footer-inner__text">lorem</div>
          <ul class="c-footer-inner__list">
            <li class="c-footer-inner__item">
              <a class="c-footer-inner__link" href="#">lore</a>
            </li>
            <li class="c-footer-inner__item">
              <a class="c-footer-inner__link" href="#">lore</a>
            </li>
            <li class="c-footer-inner__item">
              <a class="c-footer-inner__link" href="#">lorem i</a>
            </li>
            <li class="c-footer-inner__item">
              <a class="c-footer-inner__link" href="#">lorem i</a>
            </li>
            <li class="c-footer-inner__item-2">
              <a class="c-footer-inner__link" href="#">lorem i</a>
            </li>
          </ul>
        </div>
        <div class="c-footer-inner__group">
          <div class="c-footer-inner__text">lorem i</div>
          <ul class="c-footer-inner__list">
            <li class="c-footer-inner__item">
              <a class="c-footer-inner__link" href="#">l</a>
            </li>
            <li class="c-footer-inner__item">
              <a class="c-footer-inner__link" href="#">lorem ip</a>
            </li>
            <li class="c-footer-inner__item-2">
              <a class="c-footer-inner__link" href="#">lorem</a>
            </li>
          </ul>
        </div>
        <div class="c-footer-inner__group">
          <div class="c-footer-inner__text">lorem ip</div>
          <ul class="c-footer-inner__list">
            <li class="c-footer-inner__item-2">
              <a class="c-footer-inner__link" href="#">lorem ipsum dolor sit a</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="c-footer-inner__group-2">
      <span class="c-footer-inner__logo" aria-hidden="true"></span>
      <p class="c-footer-inner__text-2">lorem ipsum dolor sit amet consectetur adipi</p>
    </div>
  </footer>
</div>

.c-footer-inner-scope {
  background-color: #F8F8F9;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
}

.c-footer-inner {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
}

.c-footer-inner__columns {
  display: grid;
  gap: 80px;
  grid-template-columns: 1fr auto;
  box-sizing: border-box;
  width: 100%;
  max-width: 1080px;
  padding-right: 24px;
  padding-bottom: 96px;
  padding-left: 24px;
  margin-right: auto;
  margin-left: auto;
}

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

.c-footer-inner__inner {
  display: block;
  box-sizing: border-box;
  max-width: 421.05px;
  margin: 0px;
  font-family: Fraunces, "Fraunces Fallback", Georgia, serif;
  font-size: 42px;
  font-weight: 350;
  line-height: 46.2px;
  letter-spacing: -0.58px;
}

.c-footer-inner__cta {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 12px 24px;
  background-color: #18181B;
  background-clip: padding-box;
  color: #FFFFFF;
  border: 1px solid transparent;
  border-radius: 15px;
  cursor: pointer;
  font-size: 15px;
  line-height: 20.25px;
  letter-spacing: 0.075px;
  text-decoration-line: none;
  white-space: nowrap;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: 32px;
}

.c-footer-inner__column-2 {
  display: grid;
  gap: 40px 56px;
  grid-template-columns: repeat(3, minmax(0px, 1fr));
  box-sizing: border-box;
}

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

.c-footer-inner__text {
  display: block;
  box-sizing: border-box;
  color: #6B6B70;
  font-size: 14px;
  line-height: 19.6px;
}

.c-footer-inner__list {
  display: block;
  box-sizing: border-box;
  padding: 0px;
  margin: 16px 0px 0px;
  list-style-type: none;
}

.c-footer-inner__item {
  display: list-item;
  box-sizing: border-box;
  margin-bottom: 10px;
}

.c-footer-inner__link {
  display: inline;
  box-sizing: border-box;
  color: #18181B;
  cursor: pointer;
  font-size: 15px;
  line-height: 21px;
  letter-spacing: 0.075px;
  text-decoration-line: none;
  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-footer-inner__item-2 {
  display: list-item;
  box-sizing: border-box;
}

.c-footer-inner__group-2 {
  display: block;
  box-sizing: border-box;
  text-align: center;
  padding-bottom: 56px;
}

.c-footer-inner__logo {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  vertical-align: middle;
  background-color: currentcolor;
  transform: matrix3d(0.913545, -0.139112, 0.382207, -0.00159253, 0, 0.939693, 0.34202, -0.00142508, -0.406737, -0.312451, 0.858452, -0.00357688, 0, 0, 0, 1);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  margin-right: 706px;
  margin-left: 706px;
}

.c-footer-inner__text-2 {
  display: block;
  box-sizing: border-box;
  margin: 20px 0px 0px;
  font-family: "Space Mono", "Space Mono Fallback", ui-monospace, monospace;
  font-size: 13px;
  line-height: 20.8px;
  letter-spacing: 0.075px;
}

.c-footer-inner__cta:hover {
  opacity: 0.8;
}

.c-footer-inner__cta:focus {
  border: 1px solid #A1A1A1;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #A1A1A180 0px 0px 0px 3px, transparent 0px 0px 0px 0px;
  outline: none;
}

.c-footer-inner__link:hover {
  opacity: 0.7;
}

<div class="c-footer-inner-mobile-scope">
  <footer class="c-footer-inner-mobile">
    <div class="c-footer-inner-mobile__columns">
      <div class="c-footer-inner-mobile__column">
        <p class="c-footer-inner-mobile__inner">lorem ipsum dolor sit amet consectetur adipiscing elit se</p>
        <a class="c-footer-inner-mobile__cta" href="#">lorem ipsum</a>
      </div>
      <div class="c-footer-inner-mobile__column-2">
        <div class="c-footer-inner-mobile__group">
          <div class="c-footer-inner-mobile__text">lorem</div>
          <ul class="c-footer-inner-mobile__list">
            <li class="c-footer-inner-mobile__item">
              <a class="c-footer-inner-mobile__link" href="#">lore</a>
            </li>
            <li class="c-footer-inner-mobile__item">
              <a class="c-footer-inner-mobile__link" href="#">lore</a>
            </li>
            <li class="c-footer-inner-mobile__item">
              <a class="c-footer-inner-mobile__link" href="#">lorem i</a>
            </li>
            <li class="c-footer-inner-mobile__item">
              <a class="c-footer-inner-mobile__link" href="#">lorem i</a>
            </li>
            <li class="c-footer-inner-mobile__item-2">
              <a class="c-footer-inner-mobile__link" href="#">lorem i</a>
            </li>
          </ul>
        </div>
        <div class="c-footer-inner-mobile__group">
          <div class="c-footer-inner-mobile__text">lorem i</div>
          <ul class="c-footer-inner-mobile__list">
            <li class="c-footer-inner-mobile__item">
              <a class="c-footer-inner-mobile__link" href="#">l</a>
            </li>
            <li class="c-footer-inner-mobile__item">
              <a class="c-footer-inner-mobile__link" href="#">lorem ip</a>
            </li>
            <li class="c-footer-inner-mobile__item-2">
              <a class="c-footer-inner-mobile__link" href="#">lorem</a>
            </li>
          </ul>
        </div>
        <div class="c-footer-inner-mobile__group">
          <div class="c-footer-inner-mobile__text">lorem ip</div>
          <ul class="c-footer-inner-mobile__list">
            <li class="c-footer-inner-mobile__item-2">
              <a class="c-footer-inner-mobile__link" href="#">lorem ipsum dolor sit a</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="c-footer-inner-mobile__group-2">
      <span class="c-footer-inner-mobile__logo" aria-hidden="true"></span>
      <p class="c-footer-inner-mobile__text-2">lorem ipsum dolor sit amet consectetur adipi</p>
    </div>
  </footer>
</div>

.c-footer-inner-mobile-scope {
  background-color: #F8F8F9;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
}

.c-footer-inner-mobile {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
}

.c-footer-inner-mobile__columns {
  display: grid;
  gap: 56px;
  box-sizing: border-box;
  width: 100%;
  max-width: 1080px;
  padding-right: 24px;
  padding-bottom: 96px;
  padding-left: 24px;
  margin-right: auto;
  margin-left: auto;
}

.c-footer-inner-mobile__column {
  display: block;
  box-sizing: border-box;
}

.c-footer-inner-mobile__inner {
  display: block;
  box-sizing: border-box;
  max-width: 282.629px;
  margin: 0px;
  font-family: Fraunces, "Fraunces Fallback", Georgia, serif;
  font-size: 28px;
  font-weight: 350;
  line-height: 30.8px;
  letter-spacing: -0.58px;
}

.c-footer-inner-mobile__cta {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 12px 24px;
  background-color: #18181B;
  background-clip: padding-box;
  color: #FFFFFF;
  border: 1px solid transparent;
  border-radius: 15px;
  cursor: pointer;
  font-size: 15px;
  line-height: 20.25px;
  letter-spacing: 0.075px;
  text-decoration-line: none;
  white-space: nowrap;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: 32px;
}

.c-footer-inner-mobile__column-2 {
  display: grid;
  gap: 40px 56px;
  grid-template-columns: repeat(2, minmax(0px, 1fr));
  box-sizing: border-box;
}

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

.c-footer-inner-mobile__text {
  display: block;
  box-sizing: border-box;
  color: #6B6B70;
  font-size: 14px;
  line-height: 19.6px;
}

.c-footer-inner-mobile__list {
  display: block;
  box-sizing: border-box;
  padding: 0px;
  margin: 16px 0px 0px;
  list-style-type: none;
}

.c-footer-inner-mobile__item {
  display: list-item;
  box-sizing: border-box;
  margin-bottom: 10px;
}

.c-footer-inner-mobile__link {
  display: inline;
  box-sizing: border-box;
  color: #18181B;
  cursor: pointer;
  font-size: 15px;
  line-height: 21px;
  letter-spacing: 0.075px;
  text-decoration-line: none;
  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-footer-inner-mobile__item-2 {
  display: list-item;
  box-sizing: border-box;
}

.c-footer-inner-mobile__group-2 {
  display: block;
  box-sizing: border-box;
  text-align: center;
  padding-bottom: 56px;
}

.c-footer-inner-mobile__logo {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  vertical-align: middle;
  background-color: currentcolor;
  transform: matrix3d(0.913545, -0.139112, 0.382207, -0.00159253, 0, 0.939693, 0.34202, -0.00142508, -0.406737, -0.312451, 0.858452, -0.00357688, 0, 0, 0, 1);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  margin-right: 181px;
  margin-left: 181px;
}

.c-footer-inner-mobile__text-2 {
  display: block;
  box-sizing: border-box;
  margin: 20px 0px 0px;
  font-family: "Space Mono", "Space Mono Fallback", ui-monospace, monospace;
  font-size: 13px;
  line-height: 20.8px;
  letter-spacing: 0.075px;
}

.c-footer-inner-mobile__cta:hover {
  opacity: 0.8;
}

.c-footer-inner-mobile__cta:focus {
  border: 1px solid #A1A1A1;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #A1A1A180 0px 0px 0px 3px, transparent 0px 0px 0px 0px;
  outline: none;
}

.c-footer-inner-mobile__link:hover {
  opacity: 0.7;
}

<div class="c-product-thumbnail-button-scope">
  <button class="c-product-thumbnail-button" type="button">
    <span class="c-product-thumbnail-button__icon" aria-hidden="true"></span>
  </button>
</div>

.c-product-thumbnail-button-scope {
  background-color: #FFFFFF;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
}

.c-product-thumbnail-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  padding: 0px;
  position: relative;
  background-color: #EDEDF0;
  color: #18181B;
  border: 0;
  border-radius: 16px;
  cursor: pointer;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

.c-product-thumbnail-button__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 192px;
  height: 192px;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-product-thumbnail-button:focus {
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #42B5DC4D 0px 0px 0px 3px, transparent 0px 0px 0px 0px;
  outline: none;
}

<div class="c-hero-scope">
  <header class="c-hero">
    <h1 class="c-hero__title">lorem ipsum dolor sit amet co</h1>
    <p class="c-hero__body">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmo</p>
  </header>
</div>

.c-hero-scope {
  background-color: #F8F8F9;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
}

.c-hero {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  max-width: 1080px;
  padding: 144px 24px 56px;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
  text-align: center;
}

.c-hero__title {
  display: block;
  box-sizing: border-box;
  max-width: 573.666px;
  margin: 0px auto;
  font-family: Fraunces, "Fraunces Fallback", Georgia, serif;
  font-size: 58px;
  font-weight: 350;
  line-height: 60.9px;
  letter-spacing: -0.58px;
}

.c-hero__body {
  display: block;
  box-sizing: border-box;
  max-width: 494.592px;
  margin: 24px auto 0px;
  color: #6B6B70;
  font-size: 19.2px;
  line-height: 24.96px;
  letter-spacing: 0.096px;
}