my-content-page and fix adaptive styles

src/app/styles/pages-styles.scss

@@ -625,9 +625,14 @@
 			.actions {
 				display: flex;
 				justify-content: center;
-				gap: 0.5rem;
+				gap: 5px;
 				flex-wrap: wrap;
 
+				&-group {
+					display: flex;
+					gap: 5px;
+				}
+
 				button {
 					padding: 4px 12px;
 					font-size: 14px;
@@ -646,16 +651,141 @@
 	}
 }
 
-/* @media (max-width: 1300px) {
-	.tanstak-table {
-		max-width: 800px;
-		margin: 0 auto;
+.file-stats-container {
+	padding: 1rem;
+
+	@media (min-width: 640px) {
+		padding: 1.5rem;
 	}
 }
 
-@media (max-width: 1200px) {
-	.tanstak-table {
-		max-width: 500px;
-		margin: 0 auto;
+.file-stats-grid {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	grid-auto-rows: 1fr 1fr;
+	gap: 1rem;
+
+	@media (min-width: 640px) {
+		grid-template-columns: repeat(1, 1fr);
+		gap: 1.5rem;
 	}
-} */
+
+	@media (min-width: 1280px) {
+		grid-template-columns: repeat(2, 1fr);
+	}
+}
+
+.file-stat-card {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	border-radius: 1rem;
+	border: 1px solid v.$b-color-2;
+	background-color: v.$white;
+	padding: 1rem;
+
+	@media (min-width: 1280px) {
+		padding-right: 1.25rem;
+	}
+}
+
+.file-stat-content {
+	display: flex;
+	align-items: center;
+	gap: 1rem;
+}
+
+.file-stat-icon-wrapper {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 52px;
+	height: 52px;
+	border-radius: 0.75rem;
+
+	&.image-icon {
+		color: v.$color-image;
+	}
+
+	&.video-icon {
+		color: v.$color-video;
+	}
+
+	&.audio-icon {
+		color: v.$color-audio;
+	}
+
+	&.document-icon {
+		color: v.$color-document;
+	}
+}
+
+// Icon SVG
+.file-stat-icon {
+	width: 24px;
+	height: 24px;
+}
+
+// Text Info
+.file-stat-info {
+	display: flex;
+	flex-direction: column;
+}
+
+.file-stat-title {
+	font-size: 0.875rem;
+	font-weight: 500;
+	color: v.$text-p;
+	margin-bottom: 0.25rem;
+	line-height: 1.25;
+}
+
+.file-stat-usage {
+	font-size: 0.875rem;
+	color: v.$text-s;
+	display: block;
+	line-height: 1.25;
+}
+
+// Details (Right Side)
+.file-stat-details {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-end;
+}
+
+.file-stat-count {
+	font-size: 0.875rem;
+	color: v.$text-s;
+	display: block;
+	margin-bottom: 0.25rem;
+	text-align: right;
+	line-height: 1.25;
+}
+
+.file-stat-size {
+	font-size: 0.875rem;
+	color: v.$text-s;
+	display: block;
+	text-align: right;
+	line-height: 1.25;
+}
+
+@media (max-width: 639px) {
+	.file-stat-card {
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 1rem;
+	}
+
+	.file-stat-details {
+		align-items: flex-start;
+		width: 100%;
+		padding-left: 68px;
+	}
+
+	.file-stat-count,
+	.file-stat-size {
+		text-align: left;
+	}
+}