.type-project {
  position: relative;
  cursor: pointer;
}

.type-project .elementor-widget-image {
  position: relative;
  z-index: -1;
}

.type-project .elementor-widget-image img {
  aspect-ratio: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.type-project .project-title,
.type-project .image-icon,
.type-project .video-icon {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.type-project .project-title,
.type-project .image-icon .elementor-icon,
.type-project .video-icon .elementor-icon {
  color: var(--color-text-white);
}

.type-project .image-icon .elementor-icon {
  font-size: 32px;
}

.type-project .video-icon .elementor-icon {
  font-size: 68px;
}

.type-project .project-title {
  color: var(--color-text-white);
  font-weight: 700;
  top: var(--space-md);
  transform: translateX(-50%);
}

.type-project:hover .project-title,
.type-project.media-type-image:hover .image-icon,
.type-project.media-type-video:hover .video-icon {
  display: block;
}

/* modal styles */
.gallery-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.8);
  cursor: default;
}
.gallery-modal,
.gallery-modal .modal__container {
  display: none;
}

.gallery-modal.active,
.type-project.media-type-image .gallery-modal .modal__container--image,
.type-project.media-type-video .gallery-modal .modal__container:has(.elementor-widget-video) {
  display: block;
}

.gallery-modal .modal__container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: calc(100vw - 32px);
  width: 600px;
  background-color: var(--color-ui-white);
}

.gallery-modal .modal__image--text {
  padding-bottom: var(--space-sm);
  padding-inline: var(--space-sm);
  background-color: var(--color-ui-white);
}

@media (min-width: 768px) {
  .gallery-modal .modal__image--text {
    position: absolute;
    bottom: 0;
    inset-inline: 0;
    padding-top: var(--space-sm);
    background-color: rgba(255, 255, 255, 0.75);
  }
}