:root {
  --main-color: #0f0e02ff;
  --link-bg: rgba(0, 0, 0, 0.25);
  --link-fg: #ffffff;
  --accent-color: #4d430b;
  --link-gaps: calc(var(--col-links) - 1);
  --link-padding: 10px;
  --link-gap: 18px;
  --col-links: 3;
}

@media (max-width: 775px) {
  :root {
    --link-width: 100%;
    --col-links: 1;
  }
  h1 {
    font-size: 20px;
  }
}
@media (min-width: 776px) {
  :root {
    --link-width: 320px;
    --link-padding: 10px;
    --link-gap: 18px;
    --col-links: 2;
  }
  h1 {
    font-size: 40px;
  }
}
@media (min-width: 1174px) {
  :root {
    --link-width: 320px;
    --link-padding: 10px;
    --link-gap: 18px;
    --col-links: 3;
  }
}

body {
  font-family: "Roboto", "Open Sans", "Arial", "Helvetica", sans-serif;
  background-color: var(--main-color);
  color: #fff;
  font-stretch: 150%;
  display: flex;
  height: calc(100vh - 16px);
  align-items: center;
  justify-content: center;
}
.c-wrapper {
  width: min(calc(var(--link-width) * var(--col-links) + var(--link-gap) * var(--link-gaps) + var(--link-padding) * (var(--col-links) * 2)), 90%);
}
h1 {
  font-stretch: 1000%;
  font-weight: 100;
}

.link:not(.img) {
  border: 1px solid color-mix(in srgb, var(--link-fg) 5%, rgba(0, 0, 0, 0) 95%);
}

.link {
  width: var(--link-width);
  text-align: center;
  border-radius: 6px;
  font-size: 22px;
  white-space: nowrap;
  word-wrap: none;
  span {
    color: var(--link-fg);
    font-weight: 700;
    font-stretch: 50%;
  }
  a {
    text-decoration: none;
    padding: var(--link-padding) 0;
    display: block;
    width: 100%;
    height: 100%;
  }
}

.cont {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--link-gap);
}

.link.text {
  background: linear-gradient(to right, var(--link-bg) 33%, var(--color) 33%, var(--color) 66%, var(--link-bg) 100%);
  background-position: -0% 0;
  background-size: 305% 100%;
}

.link.img {
  span {
    color: var(--main-color);
  }
  background-image: var(--img);
  filter: brightness(200%) saturate(20%);
  background-size: 110%;
  background-position: center;
  background-repeat: no-repeat;
}

@media (any-pointer: coarse) {

  .link {
    transition: all 0.2s ease;
    span {
      color: #fff;
      font-weight: 700;
    }
  }

  span {
    transition: all 0.5s ease;
  }

  .link:active {
    span {
      color: #fff;
      font-weight: 1000;
      font-stretch: 400%;
    }

  }

  .link:active:after {
    transition: 0.3s ease;
  }

  .link.text:active {
    background-position: -99% 0;
  }

}

@media (hover:hover) {
  .link {
    transition: all 0.5s ease;
    span {
      transition: all 0.5s ease;
    }
  }

  .link:hover {
    span {
      color: #fff;
    }

  }

  .link.text:hover {
    background-position: -99% 0;
  }

}