.product-spotlight {
  flex-direction: column;
  padding: 0 calc(var(--dna-space-9) / 2) var(--dna-space-10) calc(var(--dna-space-9) / 2);
  margin: 0 auto;
  max-width: var(--dna-container-max-width); 
  
  @media screen and (min-width: 768px) {
    padding: var(--dna-space-10);
  }
  @media screen and (min-width: 1024px) {
    flex-direction: row;
    gap: calc((var(--dna-space-5) * 1.5) * 2);
    padding: var(--dna-space-20) calc(var(--dna-space-10) + var(--dna-space-4));
  }
  @media screen and (min-width: 1440px) {
    gap: calc((var(--dna-space-5) * 1.5) * 4)
  }
}

.product-spotlight__accordion {
  a {
    text-decoration: underline;
  }

  ul {
    list-style: disc;
    list-style-position: outside;
    padding-left: var(--dna-space-6);
  }

  li {
    padding-left: var(--dna-space-2);
  }

  li:not(:last-child) {
    margin-bottom: var(--dna-space-4);
  }
}
.product-spotlight__accordion::part(content)  {
  @media screen and (min-width: 768px) {
    padding-right: var(--dna-space-10);
  }
  @media screen and (min-width: 1440px) {
    width: 82%;
  }
}


.product-spotlight__media {
  margin-bottom: var(--dna-space-6);
  position: relative;

  @media screen and (min-width: 1024px) {
    margin-bottom: 0;
  }

  img {
    display: block;
    height: auto;
    width: 100%;
  }

  dna-video-controls::part(base) {
    right: 0;
    padding: var(--dna-space-4);
  }
}

.product-spotlight__quote-content {
  font: var(--dna-h2-font);

  @media screen and (min-width: 768px) {
    font: var(--dna-h3-font);
  }
}

.product-spotlight__quote-content.no-attribution {
  @media screen and (max-width: 1024px) {
    margin-bottom: calc(var(--dna-space-10) + var(--dna-space-2));
  }
}

.product-spotlight__quote-attribution {
  font: var(--dna-body-p1-font);
  font-weight: 500;
  line-height: var(--dna-space-4);
  letter-spacing: var(--dna-space-0-5);
  margin-bottom: calc(var(--dna-space-10) + var(--dna-space-2));
  margin-top: var(--dna-space-8);
  text-transform: uppercase;
}

.product-spotlight__content {
  border-top: 1px solid var(--dna-color-light-grey);
  padding-top: var(--dna-space-10);

  @media screen and (min-width: 1024px) {
    border-top: none;
    padding-top: unset;
    width: 50%;
  }
}

.product-spotlight__details {
  @media screen and (min-width: 1024px) {
    width: 50%;
  }
}