@height: 20rem;
@mobile-height: 60vh;
@text-size: 0.85rem;

.isekai-discover.isekai-card {
	.card-body {
		flex: 1 1 auto;
		padding: 0.25rem;
		font-size: 1.25rem;

		.loading {
			width: 100%;
			height: @height;
			font-size: @text-size;
			margin-top: 1px;
			display: flex;
	
			.spinner {
				margin: auto;
				padding: 2rem;
				width: 100%;
			}
		}

		.card-content {
			height: @height;
			overflow-y: auto;
			padding: 0 0.6rem;
			margin: 0 0.4rem;
			font-size: @text-size;
		}

		@media (max-width: 850px) {
			.loading {
				height: @mobile-height;
			}

			.card-content {
				height: @mobile-height;
			}
		}
	}

	&.discover-card-zh {
		.card-header {
			@media(max-width: 410px){
				.card-header-buttons {
					font-size: 0.9rem;
				}
			}

			@media(max-width: 380px){
				.card-header-buttons {
					font-size: 0.8rem;
				}
			}

			@media(max-width: 360px){
				.card-header-text {
					font-size: 1rem;
				}
			}

			@media(max-width: 350px){
				.card-header-text {
					font-size: 1.25rem;
				}
	
				.card-header-buttons {
					margin-left: 0;
					margin-top: 0.8rem;
					font-size: 1rem;
				}
	
				& {
					flex-direction: column;
				}
			}
		}
	}

	&.discover-card-en {
		.card-header {
			@media(max-width: 500px){
				.card-header-text {
					font-size: 1rem;
				}
	
				.card-header-buttons {
					font-size: 0.8rem;
				}
			}
	
			@media(max-width: 430px){
				.card-header-text {
					font-size: 1.25rem;
				}
	
				.card-header-buttons {
					margin-left: 0;
					margin-top: 0.8rem;
					font-size: 1rem;
				}
	
				& {
					flex-direction: column;
				}
			}
	
			@media(max-width: 350px){
				.card-header-text {
					font-size: 1rem;
				}
	
				.card-header-buttons {
					font-size: 0.8rem;
				}
			}
		}
	}
}