<section class="section" id="cards">
	<h2 class="section-title">Cards</h2>

	<div class="cards">
		<div class="card">
			<h3 class="card-title">Card title</h3>

			<div class="card-content">
				<img
					src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ffreesvg.org%2Fimg%2FPlaceholder.png&f=1&nofb=1&ipt=1356fd437f9ae9cf56002fe45dd224fd07e21a3633e687a46a63ba0e030decbc"
					alt=""
					class="card-thumb"
				>
				<p>Карточка для контента, виджетов, статусов.</p>
			</div>

			<div class="card-footer">
				<button class="btn btn-accent">Action</button>
			</div>
		</div>
	</div>

	<div class="block mt-6">
		<div class="row g-4">
			<div class="card device-action card-success">
				<span class="card-title">Device alias</span>

				<div class="card-content">
					<div class="device-icon-container">
						<div class="device-online-status status-online">•</div>
						<div class="device-icon">
							<i class="ph ph-power"></i> ON
						</div>
					</div>

					<p class="device-name">Device display name. Maby letters, many words</p>
				</div>
			</div>

			<div class="card device-action card-primary">
				<span class="card-title">Device alias</span>

				<div class="card-content">
					<div class="device-icon-container">
						<div class="device-online-status status-online">•</div>
						<div class="device-icon">
							<i class="ph ph-power"></i>
						</div>
					</div>

					<p class="device-name">Device display name. Maby letters, many words</p>
				</div>
			</div>

			<div class="card device-action card-warning">
				<span class="card-title">device_alias</span>

				<div class="card-content">
					<div class="device-icon-container">
						<div class="device-online-status">•</div>
						<div class="device-icon">
							<i class="ph ph-power"></i> OFF
						</div>
					</div>

					<p class="device-name">Device display name. Maby letters, many words</p>
				</div>
			</div>

			<div class="card device-action card-error">
				<span class="card-title">device_alias</span>

				<div class="card-content">
					<div class="device-icon-container">
						<div class="device-online-status status-online">•</div>
						<div class="device-icon">
							<i class="ph ph-power"></i> OFF
						</div>
					</div>

					<p class="device-name">Device display name. Maby letters, many words</p>
				</div>
			</div>

			<div class="card device-action card-info">
				<span class="card-title">device_alias</span>

				<div class="card-content">
					<div class="device-icon-container">
						<div class="device-online-status status-online">•</div>
						<div class="device-icon">
							<i class="ph ph-power"></i> OFF
						</div>
					</div>

					<p class="device-name">Device display name. Maby letters, many words</p>
				</div>
			</div>

			<div class="card device-action card-secondary">
				<span class="card-title">device_alias</span>

				<div class="card-content">
					<div class="device-icon-container">
						<div class="device-online-status status-online">•</div>
						<div class="device-icon">
							<i class="ph ph-power"></i> OFF
						</div>
					</div>

					<p class="device-name">Device display name. Maby letters, many words</p>
				</div>
			</div>
		</div>
	</div>
</section>