.content-box {
  padding: var(--margin-block);
  border: 1px solid var(--yellow-400);
  box-shadow: 0 0 10px 0 var(--yellow-400);
}
.content-box_link {
  position: relative;
  display: inline-grid;
  grid-auto-flow: column;
  column-gap: 8px;
  align-items: center;
  justify-content: start;
  padding: 6px 6px 6px 2px;
  padding-inline: 2px 6px;
  font-family: Ubuntu, sans-serif;
  font-weight: 500;
  color: var(--yellow-400);
}
@media (min-width: 740px) {
  .content-box_link {
    font-size: 16px;
  }
}
@media (max-width: 739.98px) {
  .content-box_link {
    font-size: 14px;
  }
}
.content-box_link::before {
  width: var(--size);
  height: var(--size);
  content: "";
  background-color: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%23FFBC00' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8.33 10.83a4.17 4.17 0 0 0 6.29.45l2.5-2.5a4.17 4.17 0 0 0-5.9-5.89L9.8 4.32m1.88 4.85a4.17 4.17 0 0 0-6.29-.45l-2.5 2.5a4.17 4.17 0 0 0 5.9 5.89l1.42-1.43'/%3E%3C/svg%3E") no-repeat center/contain;
}
@media (min-width: 740px) {
  .content-box_link::before {
    --size: 20px;
  }
}
@media (max-width: 739.98px) {
  .content-box_link::before {
    --size: 14px;
  }
}
.content-box_link::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  content: "";
  background-color: currentColor;
  transition: all 150ms ease-in-out;
}
.content-box_link:hover::after, .content-box_link:focus-visible::after {
  opacity: 0;
  transform: translateY(-2px);
}