Snapchat 디자인 시스템

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

.c-button-primary-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-button-primary {
  display: flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 12px 20px;
  background-color: #0096E5;
  color: #FFFFFF;
  border: 0;
  border-radius: 100px;
  cursor: pointer;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
}

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

.c-button-secondary-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-button-secondary {
  display: flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  width: fit-content;
  padding: 15px 30px;
  background-color: #444546;
  color: #FFFFFF;
  border-radius: 100px;
  cursor: pointer;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  text-decoration-line: none;
}

<div class="c-button-ghost-scope">
  <button class="c-button-ghost" type="button">lorem ipsum dolor sit am</button>
</div>

.c-button-ghost-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-button-ghost {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 13px 0px 0px;
  background-color: transparent;
  color: #0096E5;
  border: 0;
  cursor: pointer;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 12.8px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
}

.c-button-ghost:focus {
  outline: none;
}

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

.c-button-primary-2-scope {
  background-color: #FFFFFF;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-button-primary-2 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  width: fit-content;
  padding: 8px 16px;
  background-color: #121314;
  color: #FFFFFF;
  border-radius: 100px;
  cursor: pointer;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  text-decoration-line: none;
}

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

.c-button-secondary-2-scope {
  background-color: #FFFFFF;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-button-secondary-2 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  width: fit-content;
  padding: 8px 16px;
  background-color: #FFFC00;
  color: #121314;
  border: 0;
  border-radius: 100px;
  cursor: pointer;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
}

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

.c-button-ghost-2-scope {
  background-color: #FFFFFF;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-button-ghost-2 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  padding: 0px;
  background-color: #F0F1F2;
  color: #121314;
  border: 0;
  border-radius: 100%;
  cursor: pointer;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  transition: background-color 0.2s ease;
}

.c-button-ghost-2__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-button-ghost-2:hover {
  background-color: #C7C7CC;
}

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

.c-button-ghost-3-scope {
  background-color: #000000;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-button-ghost-3 {
  display: flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  background-color: transparent;
  color: #121314;
  border: 0;
  cursor: pointer;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
}

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

.c-button-ghost-4-scope {
  background-color: #000000;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-button-ghost-4 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  color: #121314;
  border-radius: 50%;
  cursor: pointer;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  text-align: right;
  transition: all 0.3s ease-out;
}

.c-button-ghost-4__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 19px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

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

.c-button-primary-3-scope {
  background-color: #FFFFFF;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-button-primary-3 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  width: fit-content;
  padding: 8px 16px;
  background-color: #FFFC00;
  color: #121314;
  border: 0;
  border-radius: 100px;
  cursor: pointer;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
}

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

.c-button-secondary-3-scope {
  background-color: #FFFFFF;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-button-secondary-3 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  width: fit-content;
  padding: 8px 16px;
  background-color: #121314;
  color: #FFFFFF;
  border-radius: 100px;
  cursor: pointer;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  text-decoration-line: none;
}

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

.c-button-ghost-5-scope {
  background-color: #FFFFFF;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-button-ghost-5 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  padding: 0px;
  background-color: #F0F1F2;
  color: #121314;
  border: 0;
  border-radius: 100%;
  cursor: pointer;
  font-family: Arial;
  font-size: 13.3333px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  transition: background-color 0.2s ease;
}

.c-button-ghost-5__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-button-ghost-5:hover {
  background-color: #C7C7CC;
}

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

.c-input-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-input {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 181px;
  height: 40px;
  padding: 10px 30px 10px 40px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: #F0F1F2;
  color: #53575B;
  border: 0;
  border-radius: 20px;
  cursor: text;
  font-family: Arial;
  font-size: 12px;
  font-weight: 700;
  line-height: 14px;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  text-overflow: ellipsis;
  transition: all 0.2s ease-in-out;
}

.c-input:hover {
  min-width: 0px;
  min-height: 0px;
}

.c-input:focus {
  min-width: 0px;
  min-height: 0px;
  outline: none;
}

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

.c-input-2-scope {
  background-color: #FFFFFF;
  color: #53575B;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

.c-input-2 {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 420px;
  height: 38px;
  padding: 7px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: #0000000D;
  color: #121314;
  border: 0;
  border-radius: 5px;
  cursor: text;
  font-family: Arial;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  margin-top: 7px;
}

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

<div class="c-select-scope">
  <select class="c-select"><option>lorem ipsum</option></select>
</div>

.c-select-scope {
  background-color: #F8F9FB;
  color: #000000;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 17px;
}

.c-select {
  display: inline-block;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 147px;
  height: 34px;
  padding: 5px 10px;
  background-color: #FFFFFF;
  color: #00000099;
  border: 1px solid #CCCCCC;
  border-radius: 5px;
  cursor: pointer;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  white-space: pre;
  appearance: none;
  margin-top: 10px;
}

<div class="c-select-2-scope">
  <select class="c-select-2"><option>lorem ipsum</option></select>
</div>

.c-select-2-scope {
  background-color: #F8F9FB;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 17px;
}

.c-select-2 {
  display: inline-block;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 201px;
  height: 34px;
  padding: 5px 10px;
  background-color: #FFFFFF;
  color: #00000099;
  border: 1px solid #CCCCCC;
  border-radius: 5px;
  cursor: pointer;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  white-space: pre;
  appearance: none;
  margin-top: 10px;
}

<div class="c-card-scope">
  <div class="c-card">
    <div class="c-card__group">
      <h2 class="c-card__title">lorem ipsum dolor sit amet consectetur</h2>
      <div class="c-card__group-2">
        <button class="c-card__button" type="button">lorem ipsum dolor</button>
      </div>
    </div>
    <div class="c-card__group-3">
      <span class="c-card__media" aria-hidden="true"></span>
    </div>
  </div>
</div>

.c-card-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-card {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  position: relative;
  color: #FFFFFF;
  border-radius: 20px;
  cursor: pointer;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-card__group {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  background-image: linear-gradient(#00000099, transparent 30%);
  border-radius: 20px;
}

.c-card__title {
  display: block;
  box-sizing: border-box;
  padding: 35px;
  margin: 0px;
  font-size: 28px;
  font-weight: 700;
  line-height: 36px;
}

.c-card__group-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  box-sizing: border-box;
  width: 100%;
  position: absolute;
  bottom: 50px;
  z-index: 1;
}

.c-card__button {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: fit-content;
  padding: 8px 16px;
  background-color: #444546;
  color: #FFFFFF;
  border: 0;
  border-radius: 100px;
  cursor: pointer;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
}

.c-card__group-3 {
  display: block;
  box-sizing: border-box;
  border-radius: 20px;
}

.c-card__media {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 396px;
  height: 690px;
  max-height: 690px;
  aspect-ratio: 9 / 16;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
  border-radius: 20px;
}

<div class="c-card-2-scope">
  <div class="c-card-2">
    <a class="c-card-2__link" href="#">
      <span class="c-card-2__media" aria-hidden="true"></span>
    </a>
  </div>
</div>

.c-card-2-scope {
  background-color: #FFFFFF;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-card-2 {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-card-2__link {
  display: inline;
  box-sizing: border-box;
  color: #0000EE;
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-color: #0000EE;
}

.c-card-2__media {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 151px;
  height: 240px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
  border-radius: 6px;
  transition: opacity 0.1s ease;
}

<div class="c-card-3-scope">
  <div class="c-card-3">
    <div class="c-card-3__group">
      <div class="c-card-3__group-2">
        <div class="c-card-3__group-3">
          <span class="c-card-3__media" aria-hidden="true"></span>
          <span class="c-card-3__group-4"></span>
          <div class="c-card-3__group-5"></div>
          <div class="c-card-3__group-6"></div>
        </div>
        <div class="c-card-3__group-7">
          <div class="c-card-3__group-8"></div>
        </div>
      </div>
    </div>
  </div>
</div>

.c-card-3-scope {
  background-color: #FFFFFF;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-card-3 {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-card-3__group {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 10px;
  position: relative;
  background-color: #F9F9F9;
  border-radius: 10px;
  cursor: pointer;
  margin-top: 5px;
  margin-bottom: 5px;
}

.c-card-3__group-2 {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  height: 720px;
  max-width: 460px;
  position: relative;
  background-color: #000000;
  border-radius: 10px;
  margin-right: auto;
  margin-left: auto;
}

.c-card-3__group-3 {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: relative;
}

.c-card-3__media {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 461px;
  height: 721px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
  border-radius: 10px;
}

.c-card-3__group-4 {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0px;
  border-radius: 10px;
  transition: all 0.25s ease;
}

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

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

.c-card-3__group-7 {
  box-sizing: border-box;
  position: absolute;
}

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

.c-card-3:hover {
  padding: 0px;
}

.c-card-3:focus {
  padding: 0px;
}

<div class="c-image-button-scope">
  <button class="c-image-button" type="button">lorem ipsum dolor</button>
</div>

.c-image-button-scope {
  background-color: #FFFFFF;
  color: #FFFFFF;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-image-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  width: fit-content;
  padding: 8px 16px;
  background-color: #444546;
  color: #FFFFFF;
  border: 0;
  border-radius: 100px;
  cursor: pointer;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
}

<div class="c-nav-link-scope">
  <a class="c-nav-link" href="#">lorem ipsum</a>
</div>

.c-nav-link-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-nav-link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  width: fit-content;
  padding: 8px 16px;
  background-color: #121314;
  color: #FFFFFF;
  border-radius: 100px;
  cursor: pointer;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  text-decoration-line: none;
}

<div class="c-header-landing-scope">
  <nav class="c-header-landing">
    <ul class="c-header-landing__nav">
      <li class="c-header-landing__nav-item">
        <a class="c-header-landing__nav-link" href="#">
          <span class="c-header-landing__group">
            <span class="c-header-landing__group-2">
              <span class="c-header-landing__icon" aria-hidden="true"></span>
            </span>
            <span class="c-header-landing__text">lorem i</span>
          </span>
        </a>
      </li>
      <li class="c-header-landing__nav-item-2">
        <a class="c-header-landing__nav-link" href="#">
          <span class="c-header-landing__group">
            <span class="c-header-landing__group-2">
              <span class="c-header-landing__icon-2" aria-hidden="true"></span>
            </span>
            <span class="c-header-landing__text">lorem ips</span>
          </span>
        </a>
      </li>
      <li class="c-header-landing__nav-item-2">
        <a class="c-header-landing__nav-link" href="#">
          <span class="c-header-landing__group">
            <span class="c-header-landing__group-3">
              <span class="c-header-landing__icon-3" aria-hidden="true"></span>
            </span>
            <span class="c-header-landing__group-2">
              <span class="c-header-landing__icon-4" aria-hidden="true"></span>
            </span>
            <span class="c-header-landing__text">lore</span>
          </span>
        </a>
      </li>
      <li class="c-header-landing__nav-item-2">
        <a class="c-header-landing__nav-link" href="#">
          <span class="c-header-landing__group">
            <span class="c-header-landing__group-2">
              <span class="c-header-landing__icon-5" aria-hidden="true"></span>
            </span>
            <span class="c-header-landing__text">lorem</span>
          </span>
        </a>
      </li>
      <li class="c-header-landing__nav-item-3">
        <a class="c-header-landing__nav-link" href="#">
          <span class="c-header-landing__group">
            <span class="c-header-landing__group-2">
              <span class="c-header-landing__icon-6" aria-hidden="true"></span>
            </span>
            <span class="c-header-landing__text">lorem ips</span>
          </span>
        </a>
      </li>
    </ul>
  </nav>
</div>

.c-header-landing-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-header-landing {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #000000;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-header-landing__nav {
  display: flex;
  align-items: flex-end;
  box-sizing: border-box;
  height: 100%;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-header-landing__nav-item {
  display: list-item;
  box-sizing: border-box;
  height: 100%;
  margin-right: 3px;
}

.c-header-landing__nav-link {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  width: 72px;
  height: 100%;
  min-height: 72px;
  position: relative;
  color: #53575B;
  cursor: pointer;
  font-family: "Avenir Next", -apple-system, system-ui, Roboto, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 12px;
  font-weight: 600;
  text-decoration-line: none;
  padding-top: 2px;
}

.c-header-landing__nav-link::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 72px;
  height: 64px;
  position: absolute;
  top: 4px;
  right: 0px;
  bottom: 4px;
  left: 0px;
  background-color: #FFFFFF;
  border-radius: 8px;
  transition: background-color 0.1s ease;
}

.c-header-landing__group {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  box-sizing: border-box;
  position: relative;
}

.c-header-landing__group-2 {
  display: block;
  box-sizing: border-box;
  margin-bottom: 4px;
}

.c-header-landing__icon {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-landing__text {
  display: block;
  box-sizing: border-box;
  padding-bottom: 4px;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: transparent;
}

.c-header-landing__nav-item-2 {
  display: list-item;
  box-sizing: border-box;
  height: 100%;
  margin-right: 3px;
  margin-left: 3px;
}

.c-header-landing__icon-2 {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 21px;
  height: 23px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-landing__group-3 {
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 10px;
  right: -10px;
}

.c-header-landing__icon-3 {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 26px;
  height: 12px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-landing__icon-4 {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 22px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-landing__icon-5 {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 25px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-landing__nav-item-3 {
  display: list-item;
  box-sizing: border-box;
  height: 100%;
  margin-left: 3px;
}

.c-header-landing__icon-6 {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-landing__nav-link:hover::before {
  background-color: #F0F1F2;
}

<div class="c-header-landing-2-scope">
  <nav class="c-header-landing-2">
    <div class="c-header-landing-2__group">
      <div class="c-header-landing-2__group-2">
        <a class="c-header-landing-2__logo" href="#">
          <span class="c-header-landing-2__logo-icon" aria-hidden="true"></span>
        </a>
      </div>
      <div class="c-header-landing-2__inner">
        <div class="c-header-landing-2__group-3">
          <span class="c-header-landing-2__group-4">
            <span class="c-header-landing-2__icon" aria-hidden="true"></span>
          </span>
          <div class="c-header-landing-2__group-5"></div>
        </div>
      </div>
    </div>
    <div class="c-header-landing-2__group-6">
      <ul class="c-header-landing-2__nav">
        <li class="c-header-landing-2__nav-item">
          <a class="c-header-landing-2__nav-link" href="#">
            <span class="c-header-landing-2__group-7">
              <span class="c-header-landing-2__group-8">
                <span class="c-header-landing-2__icon" aria-hidden="true"></span>
              </span>
              <span class="c-header-landing-2__text">lorem i</span>
            </span>
          </a>
        </li>
        <li class="c-header-landing-2__nav-item-2">
          <a class="c-header-landing-2__nav-link" href="#">
            <span class="c-header-landing-2__group-7">
              <span class="c-header-landing-2__group-8">
                <span class="c-header-landing-2__icon-2" aria-hidden="true"></span>
              </span>
              <span class="c-header-landing-2__text">lorem ips</span>
            </span>
          </a>
        </li>
        <li class="c-header-landing-2__nav-item-2">
          <a class="c-header-landing-2__nav-link" href="#">
            <span class="c-header-landing-2__group-7">
              <span class="c-header-landing-2__group-9">
                <span class="c-header-landing-2__icon-3" aria-hidden="true"></span>
              </span>
              <span class="c-header-landing-2__group-8">
                <span class="c-header-landing-2__icon-4" aria-hidden="true"></span>
              </span>
              <span class="c-header-landing-2__text">lore</span>
            </span>
          </a>
        </li>
        <li class="c-header-landing-2__nav-item-2">
          <a class="c-header-landing-2__nav-link" href="#">
            <span class="c-header-landing-2__group-7">
              <span class="c-header-landing-2__group-8">
                <span class="c-header-landing-2__icon-5" aria-hidden="true"></span>
              </span>
              <span class="c-header-landing-2__text">lorem</span>
            </span>
          </a>
        </li>
        <li class="c-header-landing-2__nav-item-3">
          <a class="c-header-landing-2__nav-link" href="#">
            <span class="c-header-landing-2__group-7">
              <span class="c-header-landing-2__group-8">
                <span class="c-header-landing-2__icon-6" aria-hidden="true"></span>
              </span>
              <span class="c-header-landing-2__text">lorem ips</span>
            </span>
          </a>
        </li>
      </ul>
    </div>
    <div class="c-header-landing-2__group-10">
      <div class="c-header-landing-2__group-11">
        <div class="c-header-landing-2__group-12">
          <button class="c-header-landing-2__menu-toggle" type="button">
            <span class="c-header-landing-2__menu-toggle-icon" aria-hidden="true"></span>
          </button>
        </div>
      </div>
      <a class="c-header-landing-2__cta" href="#">lorem ipsum</a>
      <a class="c-header-landing-2__cta" href="#">lorem ip</a>
    </div>
  </nav>
</div>

.c-header-landing-2-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-header-landing-2 {
  display: flex;
  justify-content: center;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 72px;
  background-color: #FFFFFF;
  color: #000000;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #F0F1F2;
}

.c-header-landing-2__group {
  display: flex;
  align-items: center;
  flex-grow: 1;
  flex-basis: 1px;
  box-sizing: border-box;
  height: 72px;
}

.c-header-landing-2__group-2 {
  display: block;
  box-sizing: border-box;
  width: 72px;
  height: 72px;
  padding: 8px;
}

.c-header-landing-2__logo {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 56px;
  height: 56px;
  color: #0000EE;
  border-radius: 8px;
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-color: #0000EE;
  transition: background-color 0.1s ease;
}

.c-header-landing-2__logo-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-landing-2__inner {
  display: block;
  box-sizing: border-box;
  max-width: 181px;
}

.c-header-landing-2__group-3 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

.c-header-landing-2__group-4 {
  display: block;
  box-sizing: border-box;
  position: absolute;
  margin-top: 5px;
  margin-left: 9px;
}

.c-header-landing-2__icon {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-landing-2__group-5 {
  display: block;
  box-sizing: border-box;
  width: 181px;
  height: 40px;
  padding: 10px 30px 10px 40px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: #F0F1F2;
  color: #53575B;
  border: 0;
  border-radius: 20px;
  cursor: text;
  font-family: Arial;
  font-size: 12px;
  font-weight: 700;
  line-height: 14px;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  text-overflow: ellipsis;
  transition: all 0.2s ease-in-out;
}

.c-header-landing-2__group-6 {
  display: flex;
  box-sizing: border-box;
  height: 72px;
}

.c-header-landing-2__nav {
  display: flex;
  align-items: flex-end;
  box-sizing: border-box;
  height: 100%;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-header-landing-2__nav-item {
  display: list-item;
  box-sizing: border-box;
  height: 100%;
  margin-right: 3px;
}

.c-header-landing-2__nav-link {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  width: 72px;
  height: 100%;
  min-height: 72px;
  position: relative;
  color: #53575B;
  cursor: pointer;
  font-family: "Avenir Next", -apple-system, system-ui, Roboto, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 12px;
  font-weight: 600;
  text-decoration-line: none;
  padding-top: 2px;
}

.c-header-landing-2__nav-link::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 72px;
  height: 64px;
  position: absolute;
  top: 4px;
  right: 0px;
  bottom: 4px;
  left: 0px;
  background-color: #FFFFFF;
  border-radius: 8px;
  transition: background-color 0.1s ease;
}

.c-header-landing-2__group-7 {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  box-sizing: border-box;
  position: relative;
}

.c-header-landing-2__group-8 {
  display: block;
  box-sizing: border-box;
  margin-bottom: 4px;
}

.c-header-landing-2__text {
  display: block;
  box-sizing: border-box;
  padding-bottom: 4px;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: transparent;
}

.c-header-landing-2__nav-item-2 {
  display: list-item;
  box-sizing: border-box;
  height: 100%;
  margin-right: 3px;
  margin-left: 3px;
}

.c-header-landing-2__icon-2 {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 21px;
  height: 23px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-landing-2__group-9 {
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 10px;
  right: -10px;
}

.c-header-landing-2__icon-3 {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 26px;
  height: 12px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-landing-2__icon-4 {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 22px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-landing-2__icon-5 {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 25px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-landing-2__nav-item-3 {
  display: list-item;
  box-sizing: border-box;
  height: 100%;
  margin-left: 3px;
}

.c-header-landing-2__icon-6 {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-landing-2__group-10 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-grow: 1;
  flex-basis: 1px;
  box-sizing: border-box;
  height: 72px;
  padding-right: 24px;
}

.c-header-landing-2__group-11 {
  display: block;
  box-sizing: border-box;
  margin-right: 12px;
}

.c-header-landing-2__group-12 {
  display: block;
  box-sizing: border-box;
  position: relative;
}

.c-header-landing-2__menu-toggle {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  padding: 0px;
  background-color: #F0F1F2;
  color: #121314;
  border: 0;
  border-radius: 100%;
  cursor: pointer;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  transition: background-color 0.2s ease;
}

.c-header-landing-2__menu-toggle-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-landing-2__cta {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: fit-content;
  padding: 8px 16px;
  background-color: #121314;
  color: #FFFFFF;
  border-radius: 100px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  text-decoration-line: none;
  margin-left: 10px;
}

.c-header-landing-2__logo:hover {
  background-color: #FFFC00;
}

.c-header-landing-2__nav-link:hover::before {
  background-color: #F0F1F2;
}

.c-header-landing-2__menu-toggle:hover {
  background-color: #C7C7CC;
}

<div class="c-header-inner-scope">
  <nav class="c-header-inner">
    <div class="c-header-inner__group">
      <div class="c-header-inner__group-2">
        <a class="c-header-inner__logo" href="#">
          <span class="c-header-inner__logo-icon" aria-hidden="true"></span>
        </a>
      </div>
      <div class="c-header-inner__inner">
        <div class="c-header-inner__group-3">
          <span class="c-header-inner__group-4">
            <span class="c-header-inner__icon" aria-hidden="true"></span>
          </span>
          <div class="c-header-inner__group-5"></div>
        </div>
      </div>
    </div>
    <div class="c-header-inner__group-6">
      <ul class="c-header-inner__nav">
        <li class="c-header-inner__nav-item">
          <a class="c-header-inner__nav-link" href="#">
            <span class="c-header-inner__group-7">
              <span class="c-header-inner__group-8">
                <span class="c-header-inner__icon" aria-hidden="true"></span>
              </span>
              <span class="c-header-inner__text">lorem i</span>
            </span>
          </a>
        </li>
        <li class="c-header-inner__nav-item-2">
          <a class="c-header-inner__nav-link-2" href="#">
            <span class="c-header-inner__group-7">
              <span class="c-header-inner__group-8">
                <span class="c-header-inner__icon-2" aria-hidden="true"></span>
              </span>
              <span class="c-header-inner__text-2">lorem ips</span>
            </span>
          </a>
        </li>
        <li class="c-header-inner__nav-item-2">
          <a class="c-header-inner__nav-link" href="#">
            <span class="c-header-inner__group-7">
              <span class="c-header-inner__group-9">
                <span class="c-header-inner__icon-3" aria-hidden="true"></span>
              </span>
              <span class="c-header-inner__group-8">
                <span class="c-header-inner__icon-4" aria-hidden="true"></span>
              </span>
              <span class="c-header-inner__text">lore</span>
            </span>
          </a>
        </li>
        <li class="c-header-inner__nav-item-2">
          <a class="c-header-inner__nav-link" href="#">
            <span class="c-header-inner__group-7">
              <span class="c-header-inner__group-8">
                <span class="c-header-inner__icon-5" aria-hidden="true"></span>
              </span>
              <span class="c-header-inner__text">lorem</span>
            </span>
          </a>
        </li>
        <li class="c-header-inner__nav-item-3">
          <a class="c-header-inner__nav-link" href="#">
            <span class="c-header-inner__group-7">
              <span class="c-header-inner__group-8">
                <span class="c-header-inner__icon-6" aria-hidden="true"></span>
              </span>
              <span class="c-header-inner__text">lorem ips</span>
            </span>
          </a>
        </li>
      </ul>
    </div>
    <div class="c-header-inner__group-10">
      <div class="c-header-inner__group-11">
        <div class="c-header-inner__group-12">
          <button class="c-header-inner__cta" type="button">
            <span class="c-header-inner__cta-icon" aria-hidden="true"></span>
          </button>
        </div>
      </div>
      <a class="c-header-inner__cta-2" href="#">lorem ip</a>
      <button class="c-header-inner__cta-3" type="button">lorem</button>
    </div>
  </nav>
</div>

.c-header-inner-scope {
  background-color: #FFFFFF;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-header-inner {
  display: flex;
  justify-content: center;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 72px;
  background-color: #FFFFFF;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #F0F1F2;
}

.c-header-inner__group {
  display: flex;
  align-items: center;
  flex-grow: 1;
  flex-basis: 1px;
  box-sizing: border-box;
  height: 72px;
}

.c-header-inner__group-2 {
  display: block;
  box-sizing: border-box;
  width: 72px;
  height: 72px;
  padding: 8px;
}

.c-header-inner__logo {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 56px;
  height: 56px;
  color: #0000EE;
  border-radius: 8px;
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-color: #0000EE;
  transition: background-color 0.1s ease;
}

.c-header-inner__logo-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner__inner {
  display: block;
  box-sizing: border-box;
  max-width: 181px;
}

.c-header-inner__group-3 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

.c-header-inner__group-4 {
  display: block;
  box-sizing: border-box;
  position: absolute;
  margin-top: 5px;
  margin-left: 9px;
}

.c-header-inner__icon {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner__group-5 {
  display: block;
  box-sizing: border-box;
  width: 181px;
  height: 40px;
  padding: 10px 30px 10px 40px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: #F0F1F2;
  color: #53575B;
  border: 0;
  border-radius: 20px;
  cursor: text;
  font-family: Arial;
  font-size: 12px;
  font-weight: 700;
  line-height: 14px;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  text-overflow: ellipsis;
  transition: all 0.2s ease-in-out;
}

.c-header-inner__group-6 {
  display: flex;
  box-sizing: border-box;
  height: 72px;
}

.c-header-inner__nav {
  display: flex;
  align-items: flex-end;
  box-sizing: border-box;
  height: 100%;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-header-inner__nav-item {
  display: list-item;
  box-sizing: border-box;
  height: 100%;
  margin-right: 3px;
}

.c-header-inner__nav-link {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  width: 72px;
  height: 100%;
  min-height: 72px;
  position: relative;
  color: #53575B;
  cursor: pointer;
  font-family: "Avenir Next", -apple-system, system-ui, Roboto, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 12px;
  font-weight: 600;
  text-decoration-line: none;
  padding-top: 2px;
}

.c-header-inner__nav-link::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 72px;
  height: 64px;
  position: absolute;
  top: 4px;
  right: 0px;
  bottom: 4px;
  left: 0px;
  background-color: #FFFFFF;
  border-radius: 8px;
  transition: background-color 0.1s ease;
}

.c-header-inner__group-7 {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  box-sizing: border-box;
  position: relative;
}

.c-header-inner__group-8 {
  display: block;
  box-sizing: border-box;
  margin-bottom: 4px;
}

.c-header-inner__text {
  display: block;
  box-sizing: border-box;
  padding-bottom: 4px;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: transparent;
}

.c-header-inner__nav-item-2 {
  display: list-item;
  box-sizing: border-box;
  height: 100%;
  margin-right: 3px;
  margin-left: 3px;
}

.c-header-inner__nav-link-2 {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  width: 72px;
  height: 100%;
  min-height: 72px;
  position: relative;
  color: #121314;
  cursor: pointer;
  font-family: "Avenir Next", -apple-system, system-ui, Roboto, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 12px;
  font-weight: 700;
  text-decoration-line: none;
  padding-top: 2px;
}

.c-header-inner__nav-link-2::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 72px;
  height: 64px;
  position: absolute;
  top: 4px;
  right: 0px;
  bottom: 4px;
  left: 0px;
  background-color: #FFFFFF;
  border-radius: 8px;
  transition: background-color 0.1s ease;
}

.c-header-inner__icon-2 {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 21px;
  height: 23px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner__text-2 {
  display: block;
  box-sizing: border-box;
  padding-bottom: 4px;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: #121314;
}

.c-header-inner__group-9 {
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 10px;
  right: -10px;
}

.c-header-inner__icon-3 {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 26px;
  height: 12px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner__icon-4 {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 22px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner__icon-5 {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 25px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner__nav-item-3 {
  display: list-item;
  box-sizing: border-box;
  height: 100%;
  margin-left: 3px;
}

.c-header-inner__icon-6 {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner__group-10 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-grow: 1;
  flex-basis: 1px;
  box-sizing: border-box;
  height: 72px;
  padding-right: 24px;
}

.c-header-inner__group-11 {
  display: block;
  box-sizing: border-box;
  margin-right: 12px;
}

.c-header-inner__group-12 {
  display: block;
  box-sizing: border-box;
  position: relative;
}

.c-header-inner__cta {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  padding: 0px;
  background-color: #F0F1F2;
  color: #121314;
  border: 0;
  border-radius: 100%;
  cursor: pointer;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  transition: background-color 0.2s ease;
}

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

.c-header-inner__cta-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: fit-content;
  padding: 8px 16px;
  background-color: #121314;
  color: #FFFFFF;
  border-radius: 100px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  text-decoration-line: none;
  margin-left: 10px;
}

.c-header-inner__cta-3 {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: fit-content;
  padding: 8px 16px;
  background-color: #FFFC00;
  color: #121314;
  border: 0;
  border-radius: 100px;
  cursor: pointer;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
  margin-left: 10px;
}

.c-header-inner__logo:hover {
  background-color: #FFFC00;
}

.c-header-inner__nav-link:hover::before {
  background-color: #F0F1F2;
}

.c-header-inner__nav-link-2:hover::before {
  background-color: #F0F1F2;
}

.c-header-inner__cta:hover {
  background-color: #C7C7CC;
}

<div class="c-header-inner-2-scope">
  <nav class="c-header-inner-2">
    <ul class="c-header-inner-2__nav">
      <li class="c-header-inner-2__nav-item">
        <a class="c-header-inner-2__nav-link" href="#">
          <span class="c-header-inner-2__group">
            <span class="c-header-inner-2__group-2">
              <span class="c-header-inner-2__icon" aria-hidden="true"></span>
            </span>
            <span class="c-header-inner-2__text">lorem i</span>
          </span>
        </a>
      </li>
      <li class="c-header-inner-2__nav-item-2">
        <a class="c-header-inner-2__nav-link-2" href="#">
          <span class="c-header-inner-2__group">
            <span class="c-header-inner-2__group-2">
              <span class="c-header-inner-2__icon-2" aria-hidden="true"></span>
            </span>
            <span class="c-header-inner-2__text-2">lorem ips</span>
          </span>
        </a>
      </li>
      <li class="c-header-inner-2__nav-item-2">
        <a class="c-header-inner-2__nav-link" href="#">
          <span class="c-header-inner-2__group">
            <span class="c-header-inner-2__group-3">
              <span class="c-header-inner-2__icon-3" aria-hidden="true"></span>
            </span>
            <span class="c-header-inner-2__group-2">
              <span class="c-header-inner-2__icon-4" aria-hidden="true"></span>
            </span>
            <span class="c-header-inner-2__text">lore</span>
          </span>
        </a>
      </li>
      <li class="c-header-inner-2__nav-item-2">
        <a class="c-header-inner-2__nav-link" href="#">
          <span class="c-header-inner-2__group">
            <span class="c-header-inner-2__group-2">
              <span class="c-header-inner-2__icon-5" aria-hidden="true"></span>
            </span>
            <span class="c-header-inner-2__text">lorem</span>
          </span>
        </a>
      </li>
      <li class="c-header-inner-2__nav-item-3">
        <a class="c-header-inner-2__nav-link" href="#">
          <span class="c-header-inner-2__group">
            <span class="c-header-inner-2__group-2">
              <span class="c-header-inner-2__icon-6" aria-hidden="true"></span>
            </span>
            <span class="c-header-inner-2__text">lorem ips</span>
          </span>
        </a>
      </li>
    </ul>
  </nav>
</div>

.c-header-inner-2-scope {
  background-color: #FFFFFF;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-header-inner-2 {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-header-inner-2__nav {
  display: flex;
  align-items: flex-end;
  box-sizing: border-box;
  height: 100%;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-header-inner-2__nav-item {
  display: list-item;
  box-sizing: border-box;
  height: 100%;
  margin-right: 3px;
}

.c-header-inner-2__nav-link {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  width: 72px;
  height: 100%;
  min-height: 72px;
  position: relative;
  color: #53575B;
  cursor: pointer;
  font-family: "Avenir Next", -apple-system, system-ui, Roboto, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 12px;
  font-weight: 600;
  text-decoration-line: none;
  padding-top: 2px;
}

.c-header-inner-2__nav-link::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 72px;
  height: 64px;
  position: absolute;
  top: 4px;
  right: 0px;
  bottom: 4px;
  left: 0px;
  background-color: #FFFFFF;
  border-radius: 8px;
  transition: background-color 0.1s ease;
}

.c-header-inner-2__group {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  box-sizing: border-box;
  position: relative;
}

.c-header-inner-2__group-2 {
  display: block;
  box-sizing: border-box;
  margin-bottom: 4px;
}

.c-header-inner-2__icon {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner-2__text {
  display: block;
  box-sizing: border-box;
  padding-bottom: 4px;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: transparent;
}

.c-header-inner-2__nav-item-2 {
  display: list-item;
  box-sizing: border-box;
  height: 100%;
  margin-right: 3px;
  margin-left: 3px;
}

.c-header-inner-2__nav-link-2 {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  width: 72px;
  height: 100%;
  min-height: 72px;
  position: relative;
  color: #121314;
  cursor: pointer;
  font-family: "Avenir Next", -apple-system, system-ui, Roboto, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 12px;
  font-weight: 700;
  text-decoration-line: none;
  padding-top: 2px;
}

.c-header-inner-2__nav-link-2::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 72px;
  height: 64px;
  position: absolute;
  top: 4px;
  right: 0px;
  bottom: 4px;
  left: 0px;
  background-color: #FFFFFF;
  border-radius: 8px;
  transition: background-color 0.1s ease;
}

.c-header-inner-2__icon-2 {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 21px;
  height: 23px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner-2__text-2 {
  display: block;
  box-sizing: border-box;
  padding-bottom: 4px;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: #121314;
}

.c-header-inner-2__group-3 {
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 10px;
  right: -10px;
}

.c-header-inner-2__icon-3 {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 26px;
  height: 12px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner-2__icon-4 {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 22px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner-2__icon-5 {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 25px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner-2__nav-item-3 {
  display: list-item;
  box-sizing: border-box;
  height: 100%;
  margin-left: 3px;
}

.c-header-inner-2__icon-6 {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner-2__nav-link:hover::before {
  background-color: #F0F1F2;
}

.c-header-inner-2__nav-link-2:hover::before {
  background-color: #F0F1F2;
}

<div class="c-header-inner-3-scope">
  <nav class="c-header-inner-3">
    <div class="c-header-inner-3__group">
      <div class="c-header-inner-3__group-2">
        <a class="c-header-inner-3__logo" href="#">
          <span class="c-header-inner-3__logo-icon" aria-hidden="true"></span>
        </a>
      </div>
      <div class="c-header-inner-3__inner">
        <div class="c-header-inner-3__group-3">
          <span class="c-header-inner-3__group-4">
            <span class="c-header-inner-3__icon" aria-hidden="true"></span>
          </span>
          <div class="c-header-inner-3__group-5"></div>
        </div>
      </div>
    </div>
    <div class="c-header-inner-3__group-6">
      <ul class="c-header-inner-3__nav">
        <li class="c-header-inner-3__nav-item">
          <a class="c-header-inner-3__nav-link" href="#">
            <span class="c-header-inner-3__group-7">
              <span class="c-header-inner-3__group-8">
                <span class="c-header-inner-3__icon" aria-hidden="true"></span>
              </span>
              <span class="c-header-inner-3__text">lorem i</span>
            </span>
          </a>
        </li>
        <li class="c-header-inner-3__nav-item-2">
          <a class="c-header-inner-3__nav-link-2" href="#">
            <span class="c-header-inner-3__group-7">
              <span class="c-header-inner-3__group-8">
                <span class="c-header-inner-3__icon-2" aria-hidden="true"></span>
              </span>
              <span class="c-header-inner-3__text-2">lorem ips</span>
            </span>
          </a>
        </li>
        <li class="c-header-inner-3__nav-item-2">
          <a class="c-header-inner-3__nav-link-2" href="#">
            <span class="c-header-inner-3__group-7">
              <span class="c-header-inner-3__group-9">
                <span class="c-header-inner-3__icon-3" aria-hidden="true"></span>
              </span>
              <span class="c-header-inner-3__group-8">
                <span class="c-header-inner-3__icon-4" aria-hidden="true"></span>
              </span>
              <span class="c-header-inner-3__text-2">lore</span>
            </span>
          </a>
        </li>
        <li class="c-header-inner-3__nav-item-2">
          <a class="c-header-inner-3__nav-link-2" href="#">
            <span class="c-header-inner-3__group-7">
              <span class="c-header-inner-3__group-8">
                <span class="c-header-inner-3__icon-5" aria-hidden="true"></span>
              </span>
              <span class="c-header-inner-3__text-2">lorem</span>
            </span>
          </a>
        </li>
        <li class="c-header-inner-3__nav-item-3">
          <a class="c-header-inner-3__nav-link-2" href="#">
            <span class="c-header-inner-3__group-7">
              <span class="c-header-inner-3__group-8">
                <span class="c-header-inner-3__icon-6" aria-hidden="true"></span>
              </span>
              <span class="c-header-inner-3__text-2">lorem ips</span>
            </span>
          </a>
        </li>
      </ul>
    </div>
    <div class="c-header-inner-3__group-10">
      <div class="c-header-inner-3__group-11">
        <div class="c-header-inner-3__group-12">
          <button class="c-header-inner-3__cta" type="button">
            <span class="c-header-inner-3__cta-icon" aria-hidden="true"></span>
          </button>
        </div>
      </div>
      <a class="c-header-inner-3__cta-2" href="#">lorem ip</a>
      <button class="c-header-inner-3__cta-3" type="button">lorem</button>
    </div>
  </nav>
</div>

.c-header-inner-3-scope {
  background-color: #FFFFFF;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-header-inner-3 {
  display: flex;
  justify-content: center;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 72px;
  background-color: #FFFFFF;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #F0F1F2;
}

.c-header-inner-3__group {
  display: flex;
  align-items: center;
  flex-grow: 1;
  flex-basis: 1px;
  box-sizing: border-box;
  height: 72px;
}

.c-header-inner-3__group-2 {
  display: block;
  box-sizing: border-box;
  width: 72px;
  height: 72px;
  padding: 8px;
}

.c-header-inner-3__logo {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 56px;
  height: 56px;
  color: #0000EE;
  border-radius: 8px;
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-color: #0000EE;
  transition: background-color 0.1s ease;
}

.c-header-inner-3__logo-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner-3__inner {
  display: block;
  box-sizing: border-box;
  max-width: 181px;
}

.c-header-inner-3__group-3 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

.c-header-inner-3__group-4 {
  display: block;
  box-sizing: border-box;
  position: absolute;
  margin-top: 5px;
  margin-left: 9px;
}

.c-header-inner-3__icon {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner-3__group-5 {
  display: block;
  box-sizing: border-box;
  width: 181px;
  height: 40px;
  padding: 10px 30px 10px 40px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: #F0F1F2;
  color: #53575B;
  border: 0;
  border-radius: 20px;
  cursor: text;
  font-family: Arial;
  font-size: 12px;
  font-weight: 700;
  line-height: 14px;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  text-overflow: ellipsis;
  transition: all 0.2s ease-in-out;
}

.c-header-inner-3__group-6 {
  display: flex;
  box-sizing: border-box;
  height: 72px;
}

.c-header-inner-3__nav {
  display: flex;
  align-items: flex-end;
  box-sizing: border-box;
  height: 100%;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-header-inner-3__nav-item {
  display: list-item;
  box-sizing: border-box;
  height: 100%;
  margin-right: 3px;
}

.c-header-inner-3__nav-link {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  width: 72px;
  height: 100%;
  min-height: 72px;
  position: relative;
  color: #121314;
  cursor: pointer;
  font-family: "Avenir Next", -apple-system, system-ui, Roboto, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 12px;
  font-weight: 700;
  text-decoration-line: none;
  padding-top: 2px;
}

.c-header-inner-3__nav-link::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 72px;
  height: 64px;
  position: absolute;
  top: 4px;
  right: 0px;
  bottom: 4px;
  left: 0px;
  background-color: #FFFFFF;
  border-radius: 8px;
  transition: background-color 0.1s ease;
}

.c-header-inner-3__group-7 {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  box-sizing: border-box;
  position: relative;
}

.c-header-inner-3__group-8 {
  display: block;
  box-sizing: border-box;
  margin-bottom: 4px;
}

.c-header-inner-3__text {
  display: block;
  box-sizing: border-box;
  padding-bottom: 4px;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: #121314;
}

.c-header-inner-3__nav-item-2 {
  display: list-item;
  box-sizing: border-box;
  height: 100%;
  margin-right: 3px;
  margin-left: 3px;
}

.c-header-inner-3__nav-link-2 {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  width: 72px;
  height: 100%;
  min-height: 72px;
  position: relative;
  color: #53575B;
  cursor: pointer;
  font-family: "Avenir Next", -apple-system, system-ui, Roboto, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 12px;
  font-weight: 600;
  text-decoration-line: none;
  padding-top: 2px;
}

.c-header-inner-3__nav-link-2::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 72px;
  height: 64px;
  position: absolute;
  top: 4px;
  right: 0px;
  bottom: 4px;
  left: 0px;
  background-color: #FFFFFF;
  border-radius: 8px;
  transition: background-color 0.1s ease;
}

.c-header-inner-3__icon-2 {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 21px;
  height: 23px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner-3__text-2 {
  display: block;
  box-sizing: border-box;
  padding-bottom: 4px;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: transparent;
}

.c-header-inner-3__group-9 {
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 10px;
  right: -10px;
}

.c-header-inner-3__icon-3 {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 26px;
  height: 12px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner-3__icon-4 {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 22px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner-3__icon-5 {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 25px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner-3__nav-item-3 {
  display: list-item;
  box-sizing: border-box;
  height: 100%;
  margin-left: 3px;
}

.c-header-inner-3__icon-6 {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner-3__group-10 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-grow: 1;
  flex-basis: 1px;
  box-sizing: border-box;
  height: 72px;
  padding-right: 24px;
}

.c-header-inner-3__group-11 {
  display: block;
  box-sizing: border-box;
  margin-right: 12px;
}

.c-header-inner-3__group-12 {
  display: block;
  box-sizing: border-box;
  position: relative;
}

.c-header-inner-3__cta {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  padding: 0px;
  background-color: #F0F1F2;
  color: #121314;
  border: 0;
  border-radius: 100%;
  cursor: pointer;
  font-family: Arial;
  font-size: 13.3333px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  transition: background-color 0.2s ease;
}

.c-header-inner-3__cta-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner-3__cta-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: fit-content;
  padding: 8px 16px;
  background-color: #121314;
  color: #FFFFFF;
  border-radius: 100px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  text-decoration-line: none;
  margin-left: 10px;
}

.c-header-inner-3__cta-3 {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: fit-content;
  padding: 8px 16px;
  background-color: #FFFC00;
  color: #121314;
  border: 0;
  border-radius: 100px;
  cursor: pointer;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
  margin-left: 10px;
}

.c-header-inner-3__logo:hover {
  background-color: #FFFC00;
}

.c-header-inner-3__nav-link:hover::before {
  background-color: #F0F1F2;
}

.c-header-inner-3__nav-link-2:hover::before {
  background-color: #F0F1F2;
}

.c-header-inner-3__cta:hover {
  background-color: #C7C7CC;
}

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

.c-action-button-scope {
  background-color: #F0F1F2;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-action-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  color: #121314;
  border-radius: 50%;
  cursor: pointer;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  transition: all 0.3s ease-out;
}

.c-action-button__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

<div class="c-action-button-2-scope">
  <div class="c-action-button-2">
    <div class="c-action-button-2__group">
      <span class="c-action-button-2__icon" aria-hidden="true"></span>
    </div>
  </div>
</div>

.c-action-button-2-scope {
  background-color: #FFFFFF;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-action-button-2 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  background-color: #F0F1F2;
  color: #121314;
  border-radius: 50%;
  cursor: pointer;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  transition: all 0.3s ease-out;
}

.c-action-button-2__group {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

.c-action-button-2__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

<div class="c-tab-active-scope">
  <button class="c-tab-active" type="button">lorem ip</button>
</div>

.c-tab-active-scope {
  background-color: #FFFFFF;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-tab-active {
  display: inline-block;
  flex-grow: 1;
  flex-basis: 0%;
  border-spacing: 0px;
  box-sizing: border-box;
  min-width: max-content;
  padding: 16px 24px;
  position: relative;
  background-color: transparent;
  color: #121314;
  border: 0;
  cursor: pointer;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
  transition: all 0.2s ease-in-out;
}

.c-tab-active::after {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 167px;
  height: 2px;
  position: absolute;
  top: 54px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: #121314;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}

.c-tab-active:hover {
  background-color: #0000000D;
}

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

.c-tab-scope {
  background-color: #FFFFFF;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-tab {
  display: inline-block;
  flex-grow: 1;
  flex-basis: 0%;
  border-spacing: 0px;
  box-sizing: border-box;
  min-width: max-content;
  padding: 16px 24px;
  position: relative;
  background-color: transparent;
  color: #53575B;
  border: 0;
  cursor: pointer;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
  transition: all 0.2s ease-in-out;
}

.c-tab:hover {
  background-color: #0000000D;
  color: #121314;
}

<div class="c-video-play-control-scope">
  <div class="c-video-play-control">
    <div class="c-video-play-control__group">
      <span class="c-video-play-control__icon" aria-hidden="true"></span>
    </div>
  </div>
</div>

.c-video-play-control-scope {
  background-color: #000000;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-video-play-control {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 60px;
  height: 60px;
  background-color: #00000080;
  color: #121314;
  border-radius: 50%;
  cursor: pointer;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  transition: all 0.3s ease-out;
}

.c-video-play-control__group {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

.c-video-play-control__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  padding: 0.59375px 0.59375px 0.59375px 2.39062px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-video-play-control:hover {
  background-color: #FFFFFF73;
}

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

.c-menu-toggle-scope {
  background-color: #000000;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-menu-toggle {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  color: #121314;
  border-radius: 50%;
  cursor: pointer;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  transition: all 0.3s ease-out;
}

.c-menu-toggle__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

<div class="c-mute-control-3-scope">
  <div class="c-mute-control-3">
    <span class="c-mute-control-3__icon" aria-hidden="true"></span>
  </div>
</div>

.c-mute-control-3-scope {
  background-color: #000000;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-mute-control-3 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  color: #121314;
  border-radius: 50%;
  cursor: pointer;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  text-align: right;
  transition: all 0.3s ease-out;
}

.c-mute-control-3__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 19px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

<div class="c-share-control-scope">
  <div class="c-share-control">
    <span class="c-share-control__icon" aria-hidden="true"></span>
  </div>
</div>

.c-share-control-scope {
  background-color: #000000;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-share-control {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  color: #121314;
  border-radius: 50%;
  cursor: pointer;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  text-align: right;
  transition: all 0.3s ease-out;
}

.c-share-control__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

<div class="c-creator-badge-scope">
  <button class="c-creator-badge" type="button">
    <div class="c-creator-badge__group">
      <div class="c-creator-badge__group-2">
        <div class="c-creator-badge__group-3">
          <div class="c-creator-badge__group-4"></div>
        </div>
      </div>
      <div class="c-creator-badge__group-5">
        <h5 class="c-creator-badge__title">
          <span class="c-creator-badge__text">lorem ipsum dol</span>
        </h5>
        <div class="c-creator-badge__group-6">
          <div class="c-creator-badge__group-7"></div>
        </div>
      </div>
    </div>
  </button>
</div>

.c-creator-badge-scope {
  background-color: #000000;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-creator-badge {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 1px 6px;
  position: absolute;
  top: 0px;
  background-color: transparent;
  color: #000000;
  border: 0;
  cursor: pointer;
  font-family: Arial;
  font-size: 13.3333px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
}

.c-creator-badge__group {
  display: flex;
  align-self: center;
  box-sizing: border-box;
  width: 100%;
  padding: 25px;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.c-creator-badge__group-2 {
  display: block;
  box-sizing: border-box;
  border-radius: 50%;
  margin-right: 8px;
}

.c-creator-badge__group-3 {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  width: 41px;
  height: 41px;
  padding: 1px;
  border-radius: 50%;
  transition: all 0.25s ease;
}

.c-creator-badge__group-4 {
  display: block;
  box-sizing: border-box;
  width: 35px;
  height: 35px;
  background-color: #FFFFFF;
  border-radius: 50%;
}

.c-creator-badge__group-5 {
  display: block;
  box-sizing: border-box;
}

.c-creator-badge__title {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
}

.c-creator-badge__text {
  display: inline-block;
  box-sizing: border-box;
  max-width: 290px;
  overflow-x: hidden;
  overflow-y: hidden;
  color: #FFFFFF;
  text-overflow: ellipsis;
}

.c-creator-badge__group-6 {
  display: block;
  box-sizing: border-box;
  margin-top: -6px;
}

.c-creator-badge__group-7 {
  display: flex;
  align-self: center;
  box-sizing: border-box;
  width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  text-overflow: ellipsis;
}

<div class="c-navigation-scope">
  <nav class="c-navigation">
    <ul class="c-navigation__list">
      <li class="c-navigation__item">
        <a class="c-navigation__link" href="#">
          <span class="c-navigation__group"></span>
        </a>
      </li>
      <li class="c-navigation__item-2">
        <a class="c-navigation__link-2" href="#">
          <span class="c-navigation__group"></span>
        </a>
      </li>
      <li class="c-navigation__item-2">
        <a class="c-navigation__link-2" href="#">
          <span class="c-navigation__group"></span>
        </a>
      </li>
      <li class="c-navigation__item-2">
        <a class="c-navigation__link-2" href="#">
          <span class="c-navigation__group"></span>
        </a>
      </li>
      <li class="c-navigation__item-3">
        <a class="c-navigation__link-2" href="#">
          <span class="c-navigation__group"></span>
        </a>
      </li>
    </ul>
  </nav>
</div>

.c-navigation-scope {
  background-color: #FFFFFF;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-navigation {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-navigation__list {
  display: flex;
  align-items: flex-end;
  box-sizing: border-box;
  height: 100%;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-navigation__item {
  display: list-item;
  box-sizing: border-box;
  height: 100%;
  margin-right: 3px;
}

.c-navigation__link {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  width: 72px;
  height: 100%;
  min-height: 72px;
  position: relative;
  color: #121314;
  cursor: pointer;
  font-family: "Avenir Next", -apple-system, system-ui, Roboto, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 12px;
  font-weight: 700;
  text-decoration-line: none;
  padding-top: 2px;
}

.c-navigation__link::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 72px;
  height: 64px;
  position: absolute;
  top: 4px;
  right: 0px;
  bottom: 4px;
  left: 0px;
  background-color: #FFFFFF;
  border-radius: 8px;
  transition: background-color 0.1s ease;
}

.c-navigation__group {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  box-sizing: border-box;
  position: relative;
}

.c-navigation__item-2 {
  display: list-item;
  box-sizing: border-box;
  height: 100%;
  margin-right: 3px;
  margin-left: 3px;
}

.c-navigation__link-2 {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  width: 72px;
  height: 100%;
  min-height: 72px;
  position: relative;
  color: #53575B;
  cursor: pointer;
  font-family: "Avenir Next", -apple-system, system-ui, Roboto, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 12px;
  font-weight: 600;
  text-decoration-line: none;
  padding-top: 2px;
}

.c-navigation__link-2::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 72px;
  height: 64px;
  position: absolute;
  top: 4px;
  right: 0px;
  bottom: 4px;
  left: 0px;
  background-color: #FFFFFF;
  border-radius: 8px;
  transition: background-color 0.1s ease;
}

.c-navigation__item-3 {
  display: list-item;
  box-sizing: border-box;
  height: 100%;
  margin-left: 3px;
}