.deferred-media__poster {
  background-color: transparent;
  border: none;
  cursor: pointer;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

.media > .deferred-media__poster,
.media.deferred-media__poster {
  display: flex;
  align-items: center;
  justify-content: center;
}

.deferred-media__poster img {
  width: auto;
  height: 100%;
}

.deferred-media {
  overflow: hidden;
}

.deferred-media:not([loaded]) template {
  z-index: -1;
}

.deferred-media[loaded] > .deferred-media__poster {
  display: none;
}

.deferred-media__poster:focus {
  outline-offset: -0.3rem;
}

.deferred-media__poster-button {
  color: rgb(var(--color-base-text));
  background-color: rgba(var(--color-base-background), 0.9);
  box-shadow: 0 0 4rem rgba(var(--color-base-text), 0.2);
  border-radius: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4.4rem;
  width: 4.4rem;
  position: absolute;
  transition: transform var(--duration-default) ease;
  z-index: 2;
}

@media screen and (min-width: 750px) {
  .deferred-media__poster-button {
    height: 6.4rem;
    width: 6.4rem;
  }
}

@media screen and (hover: hover) {
  .deferred-media:hover .deferred-media__poster-button {
    transform: scale(1.07);
  }

  .deferred-media__poster-button:hover .icon {
    animation: beat 0.6s infinite ease;
  }
}

.deferred-media__poster-button .icon {
  width: 100%;
  height: 100%;
}

@keyframes beat {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}