@use '../global' as *;

.p-single {
  padding: 0 0 rem(92.5);

  @include mq-down(sm) {
    padding-bottom: rem(10);
  }
}

.p-single-heading {
  padding-bottom: rem(36);
  margin-bottom: rem(40);
  border-bottom: 1px solid #d5d4d4;

  &__info {
    margin-bottom: rem(14);
  }

  &__dates {
    display: flex;
    align-items: center;
    gap: rem(10);
  }

  &__date {
    color: #8694aa;
    font-size: rem(18);
  }

  &__new {
    color: #ff1766;
    font-weight: 900;
    font-size: rem(12);
  }

  &__title {
    font-size: rem(40);
    line-height: 1.5;

    @include mq-down(sm) {
      font-size: rem(28);
      line-height: 1.4;
    }
  }
}

.p-single-main {
  padding-bottom: rem(60);
  margin-bottom: rem(40);
  border-bottom: 1px solid #d5d4d4;

  @include mq-down(sm) {
    padding-bottom: rem(40);
    margin-bottom: rem(25);
  }

  &__thumb {
    margin-bottom: rem(38);
  }

  &__content {
    font-weight: 500;

    p {
      font-size: rem(16);
      line-height: 2.5;
    }
  }
}

.p-single-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: rem(18);
  font-weight: 500;

  @include mq-down(sm) {
    font-size: rem(14);
    margin-bottom: rem(50);
  }

  &__move {
    display: flex;
    align-items: center;
    gap: rem(13);
    flex: 0 0 auto;

    @include mq-down(sm) {
      gap: rem(8);
    }

    &.--prev {
      .cricle-arw__arw {
        transform: scale(-1, 1);
      }
    }

    &.--next {
      flex-flow: row-reverse;
    }

    .cricle-arw {
      background-color: $key_blue;
    }
  }

  &__move-text {
  }

  &__btn {
    background-color: #e8ebee;
    border-radius: rem(29);
    flex: 0 0 rem(184);
    padding: rem(16) 0;
    text-align: center;

    @include mq-down(sm) {
      flex-basis: rem(120);
      padding: rem(12) 0;
    }
  }
}