@media only screen and (min-width: 0em) {
  #candidate-response-page {
    padding-top: calc(64 / 16 * 1rem);
    padding-bottom: calc(64 / 16 * 1rem);
    background-color: var(--color-off-white);
  }

  #candidate-response-page .container {
    width: 92%;
    max-width: var(--section-width);
  }

  #candidate-response-page .response-layout {
    display: grid;
    gap: var(--spacer-medium);
    align-items: start;
  }

  #candidate-response-page .response-page-intro {
    position: sticky;
    top: calc(64 / 16 * 1rem);
    align-self: start;
    height: fit-content;
    padding: calc(24 / 16 * 1rem);
    background-color: var(--color-white);
    border-left: calc(4 / 16 * 1rem) solid var(--color-primary-blue);
    box-shadow: 0 calc(8 / 16 * 1rem) calc(24 / 16 * 1rem) rgba(31, 33, 39, 0.1);
  }

  #candidate-response-page .eyebrow {
    margin-bottom: calc(12 / 16 * 1rem);
    color: var(--color-primary-blue);
    font-size: calc(14 / 16 * 1rem);
    font-weight: 700;
    letter-spacing: 0.08em;
  }

  #candidate-response-page h1 {
    margin-bottom: calc(8 / 16 * 1rem);
    font-size: clamp(calc(20 / 16 * 1rem), 4.2vw, calc(34 / 16 * 1rem));
    line-height: 1.1;
  }

  #candidate-response-page .candidate-type {
    margin-bottom: calc(16 / 16 * 1rem);
    opacity: 0.7;
  }

  #candidate-response-page .candidate-faiths {
    display: flex;
    flex-wrap: wrap;
    gap: calc(8 / 16 * 1rem);
    margin-bottom: calc(16 / 16 * 1rem);
  }

  #candidate-response-page .faith-pill {
    display: inline-block;
    padding: calc(6 / 16 * 1rem) calc(12 / 16 * 1rem);
    border-radius: 999px;
    background-color: #edf4fb;
    font-size: calc(14 / 16 * 1rem);
    color: #1f2127;
  }

  #candidate-response-page .faith-pill.christian {
    background-color: #fffdf6;
    border: 1px solid #e7dcc8;
  }

  #candidate-response-page .faith-pill.buddhist {
    background-color: #f8dfbe;
  }

  #candidate-response-page .faith-pill.catholic {
    background-color: #f6e5b7;
  }

  #candidate-response-page .faith-pill.sikh {
    background-color: #efe2cb;
  }

  #candidate-response-page .faith-pill.muslim {
    background-color: #dff0de;
  }

  #candidate-response-page .faith-pill.jewish {
    background-color: #f6dde1;
  }

  #candidate-response-page .faith-pill.hindu {
    background-color: #ffe5d0;
  }
  #candidate-response-page .faith-pill.roman-catholic {
    background-color: #fff7d0;
  }

  #candidate-response-page .faith-pill.anglican {
    background-color: #f9d4ce;
  }

  #candidate-response-page .faith-pill.secular,
  #candidate-response-page .faith-pill.no-affiliation,
  #candidate-response-page .faith-pill.no-response {
    background-color: #ececec;
    color: #5f5f5f;
  }

  #candidate-response-page .response-page-intro.faith-theme-christian {
    border-left-color: #fffdf6;
  }

  #candidate-response-page .response-page-intro.faith-theme-buddhist {
    border-left-color: #f8dfbe;
  }

  #candidate-response-page .response-page-intro.faith-theme-catholic {
    border-left-color: #f6e5b7;
  }

  #candidate-response-page .response-page-intro.faith-theme-sikh {
    border-left-color: #efe2cb;
  }

  #candidate-response-page .response-page-intro.faith-theme-muslim {
    border-left-color: #dff0de;
  }

  #candidate-response-page .response-page-intro.faith-theme-jewish {
    border-left-color: #f6dde1;
  }

  #candidate-response-page .response-page-intro.faith-theme-hindu {
    border-left-color: #ffe5d0;
  }

  #candidate-response-page .response-page-intro.faith-theme-roman-catholic {
    border-left-color: #fff7d0;
  }

  #candidate-response-page .response-page-intro.faith-theme-anglican {
    border-left-color: #f9d4ce;
  }

  #candidate-response-page .response-page-intro.faith-theme-secular,
  #candidate-response-page .response-page-intro.faith-theme-no-affiliation,
  #candidate-response-page .response-page-intro.faith-theme-no-response {
    border-left-color: #d8d8d8;
  }

  #candidate-response-page .response-questions {
    display: flex;
    flex-direction: column;
    gap: calc(18 / 16 * 1rem);
  }

  #candidate-response-page .back-to-candidates-floating {
    position: fixed;
    right: calc(16 / 16 * 1rem);
    bottom: calc(24 / 16 * 1rem);
    z-index: 20;
    min-width: calc(210 / 16 * 1rem);
    text-align: center;
    box-shadow: 0 calc(12 / 16 * 1rem) calc(28 / 16 * 1rem) rgba(31, 33, 39, 0.28);
  }

  #candidate-response-page .question-block {
    padding: calc(24 / 16 * 1rem);
    background-color: var(--color-white);
    border-left: calc(4 / 16 * 1rem) solid #1f2127;
  }

  #candidate-response-page .question-block h2 {
    margin-bottom: calc(12 / 16 * 1rem);
    font-size: calc(24 / 16 * 1rem);
    line-height: 1.3;
  }

  #candidate-response-page .question-block p {
    margin-bottom: calc(12 / 16 * 1rem);
  }

  #candidate-response-page .question-block p:last-child {
    margin-bottom: 0;
  }
}

@media only screen and (min-width: 48em) {
  #candidate-response-page .response-layout {
    grid-template-columns: minmax(calc(230 / 16 * 1rem), calc(300 / 16 * 1rem)) minmax(0, 1fr);
    align-items: start;
  }

  #candidate-response-page .response-page-intro {
    position: sticky;
    top: calc(96 / 16 * 1rem);
    align-self: start;
  }

  #candidate-response-page .response-page-intro,
  #candidate-response-page .question-block {
    padding: var(--spacer-medium);
  }

  #candidate-response-page .back-to-candidates-floating {
    right: calc(24 / 16 * 1rem);
    bottom: calc(24 / 16 * 1rem);
  }
}