.plarium-game-list {
  background-color: var(--wp--preset--color--plarium-grey-6);
}

.plarium-game-grid {
  max-width: 1140px;
  margin: 0 auto;
  padding-top: 0;
  padding-bottom: 50px;
}

.plarium-game-grid__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  padding: 0 15px;
}

@media screen and (min-width: $breakpoint--desktop) {
  .plarium-game-grid__inner {
    padding: 0;
  }
}

@media screen and (min-width: $breakpoint--tablet) {
  .plarium-game-grid {
    padding-top: 45px;
    padding-bottom: 95px;
  }
}

.is-dark-mode {
  .plarium-game-list {
    background-color: var(--wp--preset--color--plarium-dark-grey);
  }

  .games__content {
    background-color: var(--wp--preset--color--plarium-dark-mode-games-content);
  }
}
.plarium-game-card {
  width: 100%;
}

.plarium-game-card__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  gap: 10px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 10px -7px;
  background-color: var(--wp--preset--color--plarium-white);
  outline: 0px;
  padding: 10px;
  border: 0px;
  text-decoration: none;
  border-radius: 4px;
}

.plarium-game-card__header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.plarium-game-card__header__text {
  margin-right: 20px;
}

.plarium-game-card__header__text__title {
  font-size: 0.938rem;
  font-weight: 600;
  line-height: 20px;
}

.plarium-game-card__header__text__tagline {
  display: flex;
  font-size: 0.813rem;
  line-height: 15px;
  color: rgba(0, 0, 0, 0.5);
}

.plarium-game-card__header__link {
  color: var(--color--plarium-games-archive--card-header);
  display: flex;

  &:hover {
    color: var(--color--plarium-games-archive--card-header);
  }
}

.plarium-game-card__header__image {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}

.plarium-game-card__header__image img {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 5px;
  max-width: 50px;
}

.plarium-game-card__icons {
  display: flex;
  gap: 5px;
  padding: 5px 0px;
}

.plarium-game-card__icons svg {
  width: 15px;
  height: 15px;
}

.plarium-game-card__header__right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.plarium-game-card__header__right .plarium-game-card__header__rating__desktop {
  display: none;
}

.plarium-game-card__header__rating__mobile {
  display: flex;
  color: var(--color--plarium-games-archive--card-rating);
  font-size: 0.875rem;
  font-weight: 500;
  gap: 6px;
}

.plarium-game-card__ratings {
  white-space: nowrap;
}

.plarium-game-card__ratings > svg {
  margin-left: 1px;
}

.plarium-game-card__banner {
  display: grid;
  background-color: var(--wp--preset--color--plarium-grey-6);
  border-radius: 6px;
}

.plarium-game-card__banner img {
  display: block;
  opacity: 1;
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  transition: opacity 0.3s ease;
}

.plarium-game-card:hover .plarium-game-card__banner img {
  opacity: 0;
}

.plarium-game-card__banner video {
  display: block;
  grid-area: 1 / 1;
  opacity: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  aspect-ratio: 1400 / 600;
  transition: opacity 0.3s ease;
}

.plarium-game-card:hover .plarium-game-card__banner video {
  opacity: 1;
}

.plarium-game-card__gif {
  grid-area: 1 / 1;
  aspect-ratio: 1400 / 600;
}

.plarium-game-card__gif img {
  opacity: 0;
}

.plarium-game-card:hover
  .plarium-game-card__banner
  .plarium-game-card__gif
  img {
  opacity: 1;
}

.plarium-game-card:hover .plarium-game-card__banner__no-video img {
  opacity: 1;
  transition: none;
}

.plarium-game-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 50px;
}

.plarium-game-card__footer__cta {
  display: block;
}

.plarium-game-card__footer__cta .wp-block-button .wp-block-button__link {
  box-shadow: var(--shadow--plarium-button-2);
}

.plarium-game-card__footer__more .wp-block-button.is-style-chevron {
  padding: 0px;
}

.plarium-game-card__footer__more .wp-block-button .wp-block-button__link {
  color: var(--wp--preset--color--plarium-highlight);
  font-weight: 400;
  font-size: 1rem;

  &:hover {
    color: var(--wp--preset--color--plarium-highlight);
  }

  &::after {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.7'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.293 3.636C7.656 3.273 8.227 3.248 8.62 3.558L8.707 3.636L14.364 9.293C14.727 9.656 14.752 10.227 14.442 10.62L14.364 10.707L8.707 16.364C8.317 16.754 7.683 16.754 7.293 16.364C6.93 16.001 6.904 15.429 7.215 15.037L7.293 14.95L12.243 10L7.293 5.05C6.93 4.688 6.904 4.116 7.215 3.723L7.293 3.636Z' fill='%23007AFF'/%3E%3C/g%3E%3C/svg%3E");
  }
}

.plarium-game-card.content-deferred {
  content-visibility: auto;
  contain-intrinsic-size: 340px;
}

@media screen and (min-width: $breakpoint--mobile-large) {
  .plarium-game-card {
    width: calc(50% - 15px);
  }
}

@media screen and (min-width: $breakpoint--tablet) {
  .plarium-game-card__inner {
    padding: 15px;
    gap: 15px;
  }

  .plarium-game-card__header__text__title {
    font-size: 1.25rem;
    line-height: 30px;
  }

  .plarium-game-card__header__text__tagline {
    font-size: 1rem;
    line-height: 20px;
  }

  .plarium-game-card__icons svg {
    width: 20px;
    height: 20px;
  }

  .plarium-game-card__header__right
    .plarium-game-card__header__rating__desktop {
    display: flex;
    font-size: 0.938rem;
    font-weight: 500;
    gap: 6px;
    color: var(--color--plarium-games-archive--card-rating);
  }

  .plarium-game-card__header__rating__mobile {
    display: none;
  }

  .plarium-game-card__footer__cta .wp-block-button .wp-block-button__link {
    padding: 7px 25px;
    font-size: 1.125rem;
  }

  .plarium-game-card.content-deferred {
    contain-intrinsic-size: 390px;
  }
}

@media screen and (min-width: $breakpoint--desktop-x-large) {
  .plarium-game-card__footer__more .wp-block-button .wp-block-button__link {
    font-size: 1.125rem;
  }
}

body.is-dark-mode .plarium-game-card__inner {
  background-color: var(--wp--preset--color--plarium-dark-mode-games-content);

  .plarium-game-card__header__text__title,
  .plarium-game-card__header__rating__desktop,
  .plarium-game-card__header__rating__mobile {
    color: var(--wp--preset--color--plarium-white);
  }

  .plarium-game-card__header__text__tagline {
    color: var(--wp--preset--color--plarium-grey-4);
  }

  .plarium-game-card__icons svg {
    fill: var(--wp--preset--color--plarium-white);
  }
}