@import './assets/styles/global.scss';

.single-interview {
  position: relative;

  .number {
    @include hasRedUnderline;
    font-family: $secondary-font;
    font-size: calculateRem(100);
    line-height: 1;
    color: $blue-light;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;

    &::before {
      bottom: calculateRem(17);
      z-index: 0;
    }

    @media (min-width: $desktop) {
      left: calculateRem(-110);
    }
  }

  .name {
    color: white;
    font-size: calculateRem(30);
    padding-top: calculateRem(56);
    margin-bottom: calculateRem(32);
    line-height: 1em;
  }

  .qa-block {
    margin-bottom: calculateRem(48);
  }

  .question {
    font-size: calculateRem(18);
    color: white;
    margin-bottom: calculateRem(16);
  }

  .answer {
    color: #ddd;
    font-size: calculateRem(14);

    p {
      padding-left: calculateRem(16);
      position: relative;

      &::before {
        content: '\00B7';
        position: absolute;
        left: 0;
        top: 0;
      }
    }
  }
}