.game-info-wrap.svelte-1o5l7az {
  z-index: 1;
  display: flex;
  text-transform: capitalize;
  overflow: hidden;
  align-items: center;
  justify-content: space-between;
  color: var(--white);
  width: 100%;
}

.wrap-icon.svelte-1o5l7az {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--text-size-3xl);
  color: var(--white);
  z-index: 1;
  margin-bottom: var(--spacing-4);
}

.game-info-container.svelte-1o5l7az {
  z-index: 1;
  color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: start;
}

.ribbon.svelte-zglogk {
  position: absolute;
  left: -1px;
  top: 16px;
}

.game-card-wrap.svelte-zglogk {
  position: relative;
  transition: .3s;
}

@media (hover:hover) {
  .game-card-wrap.svelte-zglogk:hover {
    transform: translateY(-4%);
  }
}

.link.svelte-zglogk {
  transform: translate(0);
  border-radius: var(--ds-radius-md,var(--border-radius-md));
  overflow: hidden;
  display: block;
}

.hover-button.svelte-zglogk {
  position: absolute;
  bottom: var(--spacing-2);
  right: var(--spacing-2);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}

@media (hover:hover) {
  .game-card-wrap.svelte-zglogk:hover .hover-button:where(.svelte-zglogk) {
    opacity: 1;
    pointer-events: all;
  }
}

.wrap.svelte-1byrcnp {
  display: grid;
  position: relative;
  align-content: flex-start;
}

.wrap.svelte-1byrcnp img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: var(--shadows-md);
  overflow: hidden;
}

.img-wrap.svelte-1byrcnp {
  position: relative;
  will-change: transform;
  transition: .3s;
  width: 100%;
}

.img-wrap.svelte-1byrcnp:before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 134.1463414634%;
}

.info-wrap.svelte-1byrcnp {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  flex-direction: column;
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-4);
  pointer-events: none;
  transition: .3s;
}

.info-wrap.svelte-1byrcnp:before {
  opacity: 0;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--blue-500);
  border-radius: var(--ds-radius-md,var(--border-radius-md));
}

.tags-overlay.svelte-1byrcnp {
  right: 0.25rem;
}