/* Homepage refinements requested for the desktop portfolio layout. */

#Projects .ai-orb {
  background: url("assets/ai-validation-laptop.webp") center / contain no-repeat !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
}

@media (min-width: 1024px) {
  #Projects .project-card {
    padding: 30px;
  }

  #Projects .project-card--wide {
    position: relative;
    min-height: 225px;
    overflow: hidden;
  }

  #Projects .project-card--wide .project-copy {
    width: calc(100% - 390px);
    max-width: calc(100% - 360px);
    min-height: 165px;
    height: 165px;
  }

  #Projects .project-card--wide > img {
    position: absolute;
    right: 30px;
    bottom: 0;
    width: min(38%, 380px);
    height: auto;
    max-height: 200px;
    margin: 0;
    object-fit: contain;
    object-position: center bottom;
  }

  #Projects .project-grid > .project-card-link:not(.project-card--wide) {
    position: relative;
    min-height: 295px;
    padding: 30px;
    overflow: hidden;
  }

  #Projects .project-grid > .project-card-link:not(.project-card--wide) .project-copy {
    width: calc(100% - 200px);
    max-width: calc(100% - 190px);
    min-height: 235px;
    height: 235px;
  }

  #Projects .project-grid > .project-card-link:nth-of-type(2) > img,
  #Projects .project-grid > .project-card-link:nth-of-type(3) > .ai-orb {
    position: absolute;
    top: 50%;
    right: 30px;
    width: 180px;
    max-width: 32%;
    height: 184px;
    max-height: 184px;
    margin: 0;
    object-fit: contain;
    transform: translateY(-50%);
  }

  #Projects .project-grid > .project-card-link:nth-of-type(3) {
    background: rgba(255, 255, 255, 0.58);
    color: inherit;
  }

  #Projects .project-grid > .project-card-link:nth-of-type(3) .project-type {
    color: inherit;
  }
}
/* Keep desktop project copy wide enough to use the space up to each visual. */
@media (min-width: 1024px) {
  #Projects .project-card--wide .project-copy {
    width: calc(100% - 390px);
    max-width: none;
  }

  #Projects .project-card-link:not(.project-card--wide) .project-copy {
    width: calc(100% - 200px);
    max-width: none;
  }
}