.spotlight {
  background: transparent;
  padding: 0;
}


.spotlight__inner {
  --color--card--heading: black;
  --color--section--heading: black;

  max-width: unset;
  width: 100%;
  padding: 0;
  margin: 0;

  @container (width > calc(768/10 * 1rem)) {
    display: grid;
    grid-gap: calc(30/10 * 1rem);
    margin: 0 !important;

    grid-template-columns: 5fr 4fr;
    grid-template-areas:
      "highlight listing"
      ".         actions";
  }
}

.spotlight__highlight {
  grid-area: highlight;
  border-radius: calc(40/10 * 1rem);
  overflow: hidden;
  box-shadow: none;
  height: calc(400/10 * 1rem);

  @container (width > calc(768/10 * 1rem)) {
    position: sticky !important;
    top: 0;
    height: calc(550/10 * 1rem);
  }

  @container (width > calc(992/10 * 1rem)) {
    position: sticky !important;
    top: 0;
    height: calc(729/10 * 1rem);
  }
}

.spotlight__highlight__media {
  width: 100%;
  height: 100%;

  div {
    width: 100%;
    height: 100%;
  }

  img, video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.spotlight__highlight__content {
  padding: calc(20/10 * 1rem) calc(20/10 * 1rem);
  position: absolute;
  left: 0;
  bottom: calc(35/10 * 1rem);
  background-color: rgba(255, 255, 255, 0.78);
  width: 100%;

  @container (width > calc(768/10 * 1rem)) {
    width: 80%;
    padding: calc(40/10 * 1rem) calc(50/10 * 1rem) calc(40/10 * 1rem) calc(16/10 * 1rem);
  }
}

.spotlight__title {
  font-size: calc(20/10 * 1rem);
  margin: 0;
  padding: 0;
  font-family: var(--font-family--roboto-flex);
  line-height: 1;
  font-weight: 800;
  text-transform: none;
  text-align: left;
  color: black;
  margin-bottom: calc(20/10 * 1rem);

  --color--card--heading: black;

  a {
    color: black;
    text-decoration: none;
  }

  @container (width > calc(768/10 * 1rem)) {
    font-size: calc(26/10 * 1rem);
  }

  @container (width > calc(1200/10 * 1rem)) {
    font-size: calc(40/10 * 1rem);
    margin-bottom: calc(49/10 * 1rem);
  }
}

.spotlight__blurb {
  font-family: var(--font-family--roboto-flex);
  font-weight: 700;
  font-size: calc(18/10 * 1rem);
  letter-spacing: 0;
  color: black;

  p {
    &:last-child {
      margin-bottom: 0;
    }
  }
}


/**
  Now the other side of the spotlight -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-=
 */


.spotlight__content {
  margin-top: calc(24/10 * 1rem);
}

.spotlight__listing-title {
  font-family: var(--font-family--lexend);
  color: black;
  font-weight: 700;
  font-size: calc(20/10 * 1rem);
  text-transform: none;
  max-width: 80%;
  margin-bottom: calc(15/10 * 1rem);

  @container (width > calc(768/10 * 1rem)) {
    font-size: calc(22/10 * 1rem);
    margin-bottom: calc(35/10 * 1rem);
  }
}

.spotlight__listing {
  grid-area: listing;


  .viewsreference--view-title {
    display: none;
  }

  .view-title {
    font-size: calc(42/10 * 1rem);
    font-weight: 800;
    margin: calc(15/10 * 1rem) 0 calc(30/10 * 1rem) 0;

  }

  .view-content {
    display: grid;
    grid-template-columns: repeat(2, minmax( 0, 1fr));
    grid-gap: calc(30/10 * 1rem);
  }
}

.spotlight__actions {
  grid-area: actions;
  text-align: left;
  align-items: flex-start;


  @container (width > calc(768/10 * 1rem)) {
    justify-content: flex-start;
  }
}