:root {
  /* Cores Base */
  --vd-bg-color: #000;

  /* Cores VIP (Ouro) */
  --vd-vip-gradient-start: hsla(40, 100%, 75%, 1);
  --vd-vip-gradient-end: hsla(35, 60%, 48%, 1);

  /* Cores Prata */
  --vd-silver-gradient-start: rgb(223, 223, 223);
  --vd-silver-gradient-end: rgb(175, 175, 175);

  /* Cores Prata */
  --vd-default-gradient-start: rgb(61, 61, 61);
  --vd-default-gradient-end: rgb(73, 73, 73);

  /* Bordas */
  --vd-border-radius: 20px;
  --vd-icon-border-radius: 0 0 10px 10px;

  /* Espaçamentos */
  --vd-gap: 10px;
  --vd-icon-gap: 5px;
  --vd-card-padding: 2px;
  --vd-icon-padding: 4px;
  --vd-car-title-padding: 5px 25px;
  --vd-car-title-padding-mobile: 5px 15px;

  /* Tamanhos */
  --vd-card-height: 415px;
  --vd-card-height-mobile: 250px;
  --vd-icon-width: 40px;
  --vd-icon-width-mobile: 25px;
  --vd-card-title-font-size-mobile: 14px;

  /* Animações */
  --vd-transition-time: 0.3s;
  --vd-hover-scale: 1.02;
  --vd-active-scale: 0.98;
}

body {
  background-color: #000;
}

.wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}
.container {
  width: 1140px;
  display: flex;
  justify-content: center;
}
.vd-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(316px, 1fr));
  justify-content: center;
  gap: 10px;
  column-gap: 10px;
  width: 100%;
}

/* Estrutura Base (sem cor) */
.vd-border-card {
  border-radius: var(--vd-border-radius);
  overflow: hidden;
  background: transparent; /* Sem gradiente padrão */
  transition: all 0.5s;
}
.vd-border-card:hover {
  transform: translateY(-2px);
}

.vd-border-card--vip {
  padding: var(--vd-card-padding);
  background: linear-gradient(
    120deg,
    var(--vd-vip-gradient-start) 0%,
    var(--vd-vip-gradient-end) 100%
  );
}

.vd-border-card--silver {
  padding: var(--vd-card-padding);
  background: linear-gradient(
    120deg,
    var(--vd-silver-gradient-start) 0%,
    var(--vd-silver-gradient-end) 100%
  );
}

/* Card Interno (comum a todos) */
.vd-card {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: var(--vd-border-radius);
  height: var(--vd-card-height);
  position: relative;
  background-color: #f5f5f5; /* Cor de fundo padrão (pode ser ajustada) */
}

/* Ícones*/
.vd-card-icons {
  display: flex;
  width: 100%;
  gap: var(--vd-icon-gap);
  margin-left: 15px;
  z-index: 10;
}
.vd-card-icon {
  border-radius: var(--vd-icon-border-radius);
  padding: var(--vd-icon-padding);
  transition: var(--vd-transition-time);
}
.vd-card-icon svg {
  width: var(--vd-icon-width);
  color: #162142;
}

.vd-border-card--vip .vd-card-icon {
  background: linear-gradient(
    120deg,
    var(--vd-vip-gradient-start) 0%,
    var(--vd-vip-gradient-end) 100%
  );
}

.vd-border-card--silver .vd-card-icon {
  background: linear-gradient(
    120deg,
    var(--vd-silver-gradient-start) 0%,
    var(--vd-silver-gradient-end) 100%
  );
}

.vd-card-title {
  position: absolute;
  bottom: 10px;
  width: 100%;
  text-align: center;
}

.vd-card-title a {
  padding: var(--vd-car-title-padding);
  border-radius: 35px;
  display: inline-block;
  color: #000;
  text-decoration: none;
  font-weight: 600;
  transition: var(--vd-transition-time);
  font-family: "Playfair", Sans-serif;
  font-size: 1.3rem;

  /*Limitação de caracteres*/
  max-width: 160px; /* Ajuste conforme necessário para ~16 caracteres */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vd-card-title a:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  filter: brightness(1.1);
}

.vd-card-title a:active {
  transform: translateY(2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  filter: brightness(1);
}
.vd-card-title-vip {
  background: linear-gradient(
    90deg,
    var(--vd-vip-gradient-start) 0%,
    var(--vd-vip-gradient-end) 100%
  );
}
.vd-card-title-silver {
  background: linear-gradient(
    90deg,
    var(--vd-silver-gradient-start) 0%,
    var(--vd-silver-gradient-end) 100%
  );
}
.vd-card-title-default {
  background: linear-gradient(
    90deg,
    var(--vd-default-gradient-start) 0%,
    var(--vd-default-gradient-end) 100%
  );
  color: #fff !important;
}

.vd-card-icon {
  position: relative;
}
.vd-card-icon[aria-label]::after {
  content: attr(aria-label);
  position: absolute;
  left: -9999px;
  opacity: 0;
}

@media only screen and (max-width: 650px) {
  .vd-container {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
  .vd-card {
    height: var(--vd-card-height-mobile);
  }
  .vd-card-title a {
    padding: var(--vd-car-title-padding-mobile);
    font-size: var(--vd-card-title-font-size-mobile);
    max-width: 145px;
  }
  .vd-card-icon svg {
    width: var(--vd-icon-width-mobile);
  }
}