.has_video {
  position: relative;
}

.has_video::after {
  content: "";
  background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNjQgNjQiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNjQgNjQiPjxwYXRoIGQ9Ik0tOTUuOS0yMjJjLTEzLjIgMC0yMy45LTEwLjctMjMuOS0yMy45czEwLjctMjMuOSAyMy45LTIzLjlTLTcyLTI1OS4xLTcyLTI0NS45LTgyLjctMjIyLTk1LjktMjIyem0wLTQ1LjJjLTExLjcgMC0yMS4zIDkuNi0yMS4zIDIxLjMgMCAxMS43IDkuNiAyMS4zIDIxLjMgMjEuM3MyMS4zLTkuNiAyMS4zLTIxLjNjMC0xMS44LTkuNi0yMS4zLTIxLjMtMjEuM3oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyOCAyNzgpIiBmaWxsPSIjZmZmZmZmIiBjbGFzcz0iZmlsbC0xMzQ1NjMiPjwvcGF0aD48cGF0aCBkPSJNLTEwMy0yMzMuNnYtMjQuN2wyMS4yIDEyLjQtMjEuMiAxMi4zem0yLjgtMTkuOHYxNC45bDEyLjctNy40LTEyLjctNy41eiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTI4IDI3OCkiIGZpbGw9IiNmZmZmZmYiIGNsYXNzPSJmaWxsLTEzNDU2MyI+PC9wYXRoPjwvc3ZnPg==);
  position: absolute;
  background-size: 35px 35px;
  background-repeat: no-repeat;
  background-position: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background-color: rgba(0, 0, 0, 0.264);
  width: 100%;
  height: 100%;
}

.project-image.has_video::after,
.grid-gallery-fig.has_video::after,
.blog_card.has_video:after {
  background-size: 60px 60px;
}
@media (min-width: 640px) {
  .project-image.has_video::after,
  .grid-gallery-fig.has_video::after,
  .blog_card.has_video:after {
    background-size: 130px 130px;
  }
}

.video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}
.video-container iframe {
  aspect-ratio: 16/9;
}

.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}
.embed-container iframe, .embed-container object, .embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.jarallax {
  aspect-ratio: 16/9;
}
.jarallax > span {
  position: absolute;
  color: #fff;
  text-align: center;
  font-size: 70px;
  font-weight: 600;
  top: 50%;
  left: 50%;
  max-width: 400px;
  transform: translateX(-50%) translateY(-50%);
}
