.promo-box {
  background: #ECFFD1;
  padding: 2rem;
  margin-top: 8rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Roboto', arial, helvetica, sans-serif;
  display: grid;
  grid-template-areas: "heading"
                       "content";
  grid-template-rows: auto auto;
}

.promo-box p {
  grid-area: content;
  grid-template-areas: "image copy"
                       "image link";
  gap: 2rem;
  grid-template-rows: 16rem auto;
  display: inherit;
}

.promo-box--image {
  display: block;
  width: 20rem;
  height: auto;
}

.promo-box span {
  grid-area: copy;
}
.promo a:first-child {
  grid-area: image
}

.promo-box :is(h1, h3) {
  font-family: inherit;
  font-size: 2.4rem;
  grid-area: heading;
  margin: 0;
  padding-block-end: 1rem;
}

.promo-box span:last-child {
  grid-area: link;
}

.promo-button {
  display: inline-flex;
  background: hsl(24deg 100% 70%);
  color: #fff;
  padding: 0.8rem 1.6rem;
  text-decoration: none;
  border-radius: 1000px;
  border: 0;
  align-items: center;
  justify-content: center;
  transform: scale(1);
  transition: 250ms;
}


.promo-button:is(:hover, :focus) {
  filter: hue-rotate(90deg);
  color: inherit;
  outline: .4rem dotted var(--foreground);
  text-decoration: underline;
  transform: scale(1.1);

}

/* 
@media screen and (max-width: 535px) {
  article a.promo-button {
    display: block;
    margin: auto;
    min-width: 50vw;
    text-align: center;
    font-size: 2.08rem;
  }
  .promo-box img {
    height: 180px;
    margin: -15px 10px 0 5px;
  }
}
@media screen and (max-width: 488px) {
  .promo-box p:last-child {
    clear: both;
  }
}
@media screen and (max-width: 388px) {
  .promo-box p:first-of-type {
    font-size: 1.6rem;
  }
  .promo-box img {
    float: none;
    margin: 0 auto 1.6rem auto;
  }
} */