.card {
    height: calc(8 * var(--footer-m));
    width: calc(12 * var(--footer-m));
    background: linear-gradient(120deg, #ff8064, #725bdc);
    color: black;
    border-radius: calc(0.5 * var(--footer-m));
  
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--footer-m);
  
    position: fixed;
    margin: calc(2 * var(--footer-m)) calc(5 * var(--footer-m)) calc(5 * var(--footer-m))
      calc(5 * var(--footer-m));
}
  
.footer_title {
    font-weight: 500;
    font-size: calc(0.6 * var(--footer-m));
    margin: 0;
}
  
footer {
    margin-top: 80vh;
    z-index: 500;
    width: 100vw;
    height: 100vh;
    margin: 0;
  
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: flex-end;
    padding: 5rem 2vw;
    position: relative;
}
  
footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      rgba(0, 0, 0, 0) 5%,
      rgba(0, 0, 0, 0.3) 20%,
      rgba(0, 0, 0, 0.6) 30%,
      rgba(0, 0, 0, 0.8) 40%,
      rgba(0, 0, 0, 1) 50%,
      rgb(0, 0, 0)
    );
    z-index: -7;
}
  
.backdrop {
    z-index: -5;
    position: absolute;
    inset: 0;
  
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
  
    mask-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0.5) 10%,
      rgba(0, 0, 0, 0.8) 20%,
      rgba(0, 0, 0, 1) 30%,
      rgb(0, 0, 0)
    );
  
    -webkit-mask-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0.5) 10%,
      rgba(0, 0, 0, 0.8) 20%,
      rgba(0, 0, 0, 1) 30%,
      rgb(0, 0, 0)
    );
}
  
.col {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: calc(0.3 * var(--footer-m)) calc(0.8 * var(--footer-m));
    width: 28%;
}
  
.col2,
.col3 {
    background-color: #121212;
    border-radius: calc(0.5 * var(--footer-m));
}
  
.footer_link img {
    height: calc(0.3 * var(--footer-m));
    object-fit: cover;
}
  
.social {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 1rem;
}
  
.social a {
    text-decoration: none;
    color: inherit;
}
  
.footer_link {
    width: calc(0.8 * var(--footer-m));
    height: calc(0.8 * var(--footer-m));
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: calc(0.1 * var(--footer-m));
  
    display: flex;
    justify-content: center;
    align-items: center;
}