/*   Tablets    */

@media (max-width: 70em) {
	.text--preset-1 {
		font-size: 3.2rem;
	}

	body {
		padding: 2rem 3.2rem 6.4rem 3.2rem;
		gap: 2.4rem;
	}

	.flashcard-container--all-cards {
		grid-template-columns: repeat(2, 1fr);
	}

	.flashcard-container--all-cards .flashcard {
		width: 100%;
		max-width: 100%;
	}

	.all-cards-content {
		padding-bottom: 0;
	}

	.study-mode-content {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr auto;
	}

	.statistics-content {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 2rem;
	}

	.card--created,
	.card--updated,
	.card--deleted {
		top: 11.6rem;
		right: 1rem;
	}
}

/* Phones */

@media (max-width: 40em) {
	* {
		min-width: 0;
	}

	body {
		padding: 1.6rem;
		overflow-x: hidden;
	}

	.main-container {
		gap: 2.4rem;
		min-width: 0;
		width: 100%;
		overflow-x: hidden;
	}

	.app-header {
		min-width: 0;
		width: 100%;
	}

	.study-mode-content {
		width: 100%;
		min-width: 0;
		overflow-x: hidden;
	}

	.flashcard-section {
		min-width: 0;
		width: 100%;
		overflow-x: hidden;
	}

	.flashcard-section-header {
		padding: 1rem 1.2rem;
		/* flex-wrap: wrap; */
		gap: 1.6rem;
	}

	.category-filter {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.2rem;
		width: 100%;
	}

	.btn--shuffle span {
		display: none;
	}

	.flashcard-container {
		padding: 1.6rem;
		width: 100%;
		min-width: 0;
		max-width: 100%;
		box-sizing: border-box;
	}

	.flashcard-content {
		min-width: 0;
		max-width: 100%;
		width: 100%;
	}

	.flashcard-content-question,
	.flashcard-content-answer {
		min-width: 0;
		max-width: 100%;
		width: 100%;
		min-height: 28rem;
		padding: 2rem;
		box-sizing: border-box;
	}

	.question-container {
		min-width: 0;
		max-width: 100%;
		width: 100%;
		word-wrap: break-word;
	}

	.question-text,
	.question-answer {
		word-wrap: break-word;
		overflow-wrap: break-word;
		hyphens: auto;
		max-width: 100%;
	}

	.flashcard-icon {
		width: 4rem;
		height: 4rem;
	}

	.flashcard-icon--top-right {
		top: 1.6rem;
		right: 1.6rem;
	}

	.flashcard-icon--bottom-left,
	.flashcard-icon--bottom-left-answer {
		bottom: 2rem;
		left: 1.6rem;
	}

	.text--preset-1 {
		font-size: 2.4rem;
		line-height: 1.2;
	}

	.flashcard-actions {
		flex-direction: column;
		width: 100%;
		gap: 1.2rem;
	}

	.flashcard-actions .btn {
		width: 100%;
	}

	.navigation-controls {
		flex-wrap: wrap;
	}

	.next-card span,
	.previous-card span {
		display: none;
	}

	.all-cards-section-controls,
	.flashcard-section-header {
		align-items: flex-start;
	}

	.flashcard-container--all-cards {
		grid-template-columns: 1fr;
		width: 100%;
	}

	.statistics-content {
		display: flex;
		flex-direction: column;
	}

	.flashcards-hint {
		width: 100%;
	}

	.no-cards--all-cards {
		text-align: center;
	}

	.statistics-card {
		width: 100%;
	}

	.card--created,
	.card--updated,
	.card--deleted {
		top: 10.5rem;
		right: 0.5rem;
	}
}