/* The first column is the photo or its existing link. The second is the copy. */
:is(#site-content, body) :is(.hp-services__design, .mk-workshop-intro__grid, .ad-workshop)[data-sk-photo-copy] {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}

:is(#site-content, body) :is(.hp-services__design, .mk-workshop-intro__grid, .ad-workshop)[data-sk-photo-copy] > * { min-width: 0; }
:is(#site-content, body) :is(.hp-services__design, .mk-workshop-intro__grid, .ad-workshop)[data-sk-photo-copy] > :first-child {
  display: block;
  margin: 0;
  overflow: hidden;
}
:is(#site-content, body) :is(.hp-services__design, .mk-workshop-intro__grid, .ad-workshop)[data-sk-photo-copy] picture { display: block; }
:is(#site-content, body) :is(.hp-services__design, .mk-workshop-intro__grid, .ad-workshop)[data-sk-photo-copy] > :first-child img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

:is(#site-content, body) :is(.hp-services__design, .mk-workshop-intro__grid, .ad-workshop)[data-sk-photo-copy] > :last-child {
  font-family: Manrope, Arial, sans-serif;
  color: #555555;
  font-size: 16px;
  line-height: 1.85;
}

:is(#site-content, body) :is(.hp-services__design, .mk-workshop-intro__grid, .ad-workshop)[data-sk-photo-copy] > :last-child > p {
  margin: 0;
  max-width: none;
  color: inherit;
  font: inherit;
}

:is(#site-content, body) :is(.hp-services__design, .mk-workshop-intro__grid, .ad-workshop)[data-sk-photo-copy] > :last-child > p + p { margin-top: 1em; }

:is(#site-content, body) :is(.hp-services__design, .mk-workshop-intro__grid, .ad-workshop)[data-sk-photo-copy] > :last-child > :is(h2,h3):not(.hp-services__eyebrow) {
  margin: 0 0 26px;
  color: #262626;
  font: 500 clamp(36px, 3.2vw, 46px)/1.13 "Space Grotesk", Arial, sans-serif;
  letter-spacing: -.035em;
  text-transform: uppercase;
  text-wrap: balance;
  text-align: left;
}

:is(#site-content, body) :is(.hp-services__design, .mk-workshop-intro__grid, .ad-workshop)[data-sk-photo-copy] > :last-child > :is(.hp-services__eyebrow,.ad-eyebrow,.mk-design-pillar-label) {
  display: block;
  margin: 0 0 32px;
  color: #746553;
  font: 500 12px/1.6 "Space Grotesk", Arial, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
}

:is(#site-content, body) :is(.hp-services__design, .mk-workshop-intro__grid, .ad-workshop)[data-sk-photo-copy] > :last-child > :is(.hp-services__button,.ad-button) {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: 48px;
  max-width: 100%;
  margin: 28px 0 0;
  padding: 14px 24px;
  background: #5a4738;
  color: #ffffff;
  text-decoration: none;
  font: 500 12px/1.5 "Space Grotesk", Arial, sans-serif;
  letter-spacing: .02em;
  transition: background-color .2s ease;
}

:is(#site-content, body) :is(.hp-services__design, .mk-workshop-intro__grid, .ad-workshop)[data-sk-photo-copy] > :last-child > :is(.hp-services__button,.ad-button):hover {
  background-color: #44362c;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  :is(#site-content, body) :is(.hp-services__design, .mk-workshop-intro__grid, .ad-workshop)[data-sk-photo-copy] > a:first-child img { transition: transform .35s ease; }
  :is(#site-content, body) :is(.hp-services__design, .mk-workshop-intro__grid, .ad-workshop)[data-sk-photo-copy] > a:first-child:hover img { transform: scale(1.025); }
}

@media (max-width: 1023px) {
  :is(#site-content, body) :is(.hp-services__design, .mk-workshop-intro__grid, .ad-workshop)[data-sk-photo-copy] { gap: 40px; }
  :is(#site-content, body) :is(.hp-services__design, .mk-workshop-intro__grid, .ad-workshop)[data-sk-photo-copy] > :last-child { font-size: 15px; }
}

@media (max-width: 767px) {
  :is(#site-content, body) :is(.hp-services__design, .mk-workshop-intro__grid, .ad-workshop)[data-sk-photo-copy] { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  :is(#site-content, body) :is(.hp-services__design, .mk-workshop-intro__grid, .ad-workshop)[data-sk-photo-copy] > :last-child { font-size: 14px; line-height: 1.9; }
  :is(#site-content, body) :is(.hp-services__design, .mk-workshop-intro__grid, .ad-workshop)[data-sk-photo-copy] > :last-child > :is(h2,h3):not(.hp-services__eyebrow) {
    font-size: clamp(32px, 8.7vw, 40px);
    line-height: 1.14;
    text-wrap: initial;
  }
  :is(#site-content, body) :is(.hp-services__design, .mk-workshop-intro__grid, .ad-workshop)[data-sk-photo-copy] > :last-child > :is(.hp-services__eyebrow,.ad-eyebrow,.mk-design-pillar-label) {
    margin-bottom: 24px;
    font-size: 11px;
  }
  :is(#site-content, body) :is(.hp-services__design, .mk-workshop-intro__grid, .ad-workshop)[data-sk-photo-copy] > :last-child > :is(.hp-services__button,.ad-button) {
    margin-top: 24px;
    padding-inline: 20px;
  }
}