@charset "utf-8";

.player-content-wrap {
	grid-template-columns: 360px 1fr;
	align-items: start;
}

.player-image {
	width: fit-content;
	overflow: hidden;
	border-radius: 10px;
	margin-inline: auto;
}

.player-content p {
	line-height: 1.5;
}

.player-content .team-category {
	padding: var(--space-5) var(--space-20);
}

.player-content .card-header {
	gap: var(--space-10);
}

.ttl-line {
	margin-bottom: var(--space-10);
	padding-bottom: var(--space-5);
	border-bottom: 1px solid var(--clr-neutral-900);
}

.btn-back-to-list {
	border-top: 1px solid var(--clr-border-500);
}

.single-comment-wrap .btn {
	width: 300px;
  gap: var(--space-20);
}

.comment-count {
	margin-right: auto;
  gap: var(--space-10);
}

.comment-body {
  padding: var(--space-20) var(--space-40);
  background-color: var(--clr-background);
  border-radius: .625rem;
	overflow-wrap: break-word;
}

.comment-content p {
  line-height: 1.5;
  margin-top: var(--space-5);
}

.btn-load-comment{
  border: none;
  background: transparent;
  margin: auto;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-10);
}

.icon-chev-down {
  width: .6875rem;
  height: .4375rem;
	stroke: var(--clr-border-400);
}

.icon-chev-down.rotate {
  transform: rotate(180deg);
}

/* Below 1100px */
@media (max-width: 68.75em) {
	.player-content-wrap {
		grid-template-columns: 280px 1fr;
	}
}

/* Below 768px */
@media (max-width: 48em) {
	.player-content-wrap {
		grid-template-columns: 1fr;
	}

	.player-image img {
		margin-inline: auto;
	}

  .comment-body {
    padding: var(--space-20);
  }
}

@media (max-width: 21.25em) {
	.single-comment-wrap .btn {
		width: 100%;
		height: unset;
	}
}