.poc {
	--poc-accent: #0da9eb;
	--poc-gold: #c49344;
	--poc-text: #30393f;
	--poc-muted: #67767c;
	--poc-soft: #98a9b0;
	font-family: "DB AdmanRounded X", sans-serif;
	color: var(--poc-text);
}
.poc .poc-heading{ margin: 0 0 6px; font-size: 44px; font-weight: 700; line-height: 1.25; color: var(--poc-text); }
.poc .poc-intro{ margin: 0 0 10px; max-width: 864px; font-size: 19px; line-height: 24px; color: var(--poc-muted); }
.poc .poc-viewall{ display: inline-flex; align-items: center; gap: 6px; font-size: 19px; color: var(--poc-gold); text-decoration: none; }
.poc .poc-viewall:hover{ color: var(--poc-gold); text-decoration: underline; }
.poc .poc-empty{ margin-top: 24px; color: var(--poc-muted); }

/* shared card bits */
.poc .poc-card { position: relative; display: flex; background: #fff; border-radius: 10px; box-shadow: 0 4px 17px rgba(0, 0, 0, .08); }
.poc .poc-media{ position: relative; display: block; overflow: hidden; background: #eef6fa; }
.poc .poc-media > img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.poc .poc-badge{
	position: absolute; top: 18px; left: 0; z-index: 1;
	display: inline-flex; align-items: center; gap: 6px;
	height: 27px; padding: 0 22px 0 8px;
	background: url("data:image/svg+xml,%3Csvg preserveAspectRatio=%22none%22 overflow=%22visible%22 width=%22125.191%22 height=%2227%22 viewBox=%220 0 125.191 27%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath id=%22Rectangle 284%22 d=%22M0 0H124.19C124.976 0 125.455 0.866434 125.036 1.53238L117.51 13.5L125.036 25.4676C125.455 26.1336 124.976 27 124.19 27H0V0Z%22 fill=%22%23F9506E%22/%3E%3C/svg%3E") no-repeat right center / 100% 100%;
	color: #fff; font-size: 14px; font-weight: 700; line-height: 20px; white-space: nowrap;
}
.poc .poc-badge::before{ content: ""; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg preserveAspectRatio=%22none%22 overflow=%22visible%22 width=%2216%22 height=%2216%22 viewBox=%220 0 16 16%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg id=%22Phosphor / Games / Crown%22%3E%3Cg id=%22Vector%22%3E%3C/g%3E%3Cpath id=%22Vector_2%22 d=%22M2.81875 12.25C2.83474 12.3157 2.86375 12.3776 2.90405 12.4319C2.94435 12.4863 2.99513 12.532 3.0534 12.5663C3.11166 12.6007 3.17622 12.6231 3.24327 12.6321C3.31031 12.6411 3.37848 12.6365 3.44375 12.6187C6.42312 11.7938 9.57063 11.7938 12.55 12.6187C12.6153 12.6365 12.6834 12.6411 12.7505 12.6321C12.8175 12.6231 12.8821 12.6007 12.9404 12.5663C12.9986 12.532 13.0494 12.4863 13.0897 12.4319C13.13 12.3776 13.159 12.3157 13.175 12.25L14.7687 5.48125C14.7906 5.39065 14.7868 5.29574 14.7576 5.20722C14.7284 5.11871 14.675 5.04012 14.6035 4.98032C14.532 4.92053 14.4452 4.8819 14.3529 4.86882C14.2607 4.85573 14.1666 4.86869 14.0812 4.90625L10.9187 6.3125C10.8042 6.36295 10.6749 6.36916 10.5561 6.32991C10.4372 6.29066 10.337 6.20875 10.275 6.1L8.4375 2.7875C8.39426 2.70935 8.33088 2.64421 8.25394 2.59885C8.177 2.55349 8.08931 2.52956 8 2.52956C7.91068 2.52956 7.823 2.55349 7.74606 2.59885C7.66912 2.64421 7.60574 2.70935 7.5625 2.7875L5.725 6.1C5.66297 6.20875 5.56284 6.29066 5.44394 6.32991C5.32505 6.36916 5.19584 6.36295 5.08125 6.3125L1.91875 4.90625C1.83345 4.86869 1.73934 4.85573 1.64706 4.86882C1.55478 4.8819 1.46799 4.92053 1.3965 4.98032C1.325 5.04012 1.27164 5.11871 1.24244 5.20722C1.21324 5.29574 1.20937 5.39065 1.23125 5.48125L2.81875 12.25Z%22 fill=%22white%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 stroke=%22white%22/%3E%3Cpath id=%22Vector_3%22 d=%22M6 10.1062C7.32946 9.96251 8.67054 9.96251 10 10.1062%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 stroke=%22%23F9506E%22/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain; }
.poc .poc-logo{
	position: absolute; top: 16px; right: 16px; z-index: 1;
	width: 43px; height: 43px; border-radius: 50%;
	background: #fff; display: grid; place-items: center;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}
.poc .poc-logo img{ width: 39px; height: 39px; object-fit: contain; border-radius: 50%; }

.poc .poc-title{ margin: 0; font-size: 22px; line-height: 25px; font-weight: 700; color: #333; }
.poc .poc-title a{ color: inherit; text-decoration: none; }
.poc .poc-abbr{ margin: 4px 0 0; font-size: 18px; line-height: 20px; color: var(--poc-gold); }
.poc .poc-cert{ margin: 6px 0 0; font-size: 15px; line-height: 20px; color: var(--poc-muted); }
.poc .poc-desc{ margin: 10px 0 0; font-size: 16px; line-height: 18px; color: var(--poc-soft); }
.poc .poc-duration{ margin: 0; font-size: 26px; line-height: 30px; font-weight: 700; color: var(--poc-accent); }
.poc .poc-btn{
	box-sizing: border-box;
	display: inline-block; padding: 10px 18px; min-width: 193px;
	background: var(--poc-accent); color: #fff; border-radius: 8px;
	box-shadow: 0 4px 17px rgba(0, 0, 0, .08);
	text-align: center; font-size: 20px; font-weight: 700; line-height: 26px; text-decoration: none;
	transition: filter .2s;
}
.poc .poc-btn:hover, .poc .poc-btn:focus-visible{ color: #fff; filter: brightness(1.08); }
.poc .poc-rating{ display: flex; align-items: center; gap: 6px; margin: 0; font-size: 16px; font-weight: 700; line-height: 18px; color: var(--poc-text); }
.poc .poc-sep{ color: #d4d4d4; font-weight: 400; }
.poc .poc-stars span{ color: #cfe4ed; font-size: 15px; letter-spacing: 2px; }
.poc .poc-stars span.on{ color: #edca4c; }

/* featured (popular) course: wide card */
.poc .poc-featured { position: relative; margin: 46px 0 0; }
.poc .poc-featured::before{
	/* ponytail: decorative stacked-card bar from the design */
	content: ""; position: absolute; left: 3%; right: 3%; top: 25%; bottom: -11px;
	background: #a5c5d3; border-radius: 10px; box-shadow: 0 4px 27px rgba(0, 0, 0, .17);
}
.poc .poc-featured .poc-card{ min-height: 251px; }
.poc .poc-featured .poc-media{ flex: 0 0 36.1%; border-radius: 10px 0 0 10px; }
.poc .poc-featured .poc-body{
	flex: 1; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto;
	column-gap: 24px; padding: 25px 35px 34px 32px;
}
.poc .poc-featured .poc-head{ grid-column: 1; max-width: 420px; }
.poc .poc-featured .poc-foot{ grid-column: 1; grid-row: 3; display: flex; flex-direction: column; gap: 10px; }
.poc .poc-featured .poc-btn{ grid-column: 2; grid-row: 3; align-self: end; }
.poc .poc-featured .poc-logo{ position: static; grid-column: 2; grid-row: 1; justify-self: end; }

/* other courses: 3-column grid */
.poc .poc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 37px; margin-top: 44px; }
.poc .poc-grid .poc-card{ flex-direction: column; min-height: 537px; }
.poc .poc-grid .poc-media{ aspect-ratio: 336 / 230; border-radius: 10px 10px 0 0; }
.poc .poc-grid .poc-body{ flex: 1; display: flex; flex-direction: column; padding: 19px 19px 20px; }
.poc .poc-grid .poc-duration{ margin-top: auto; padding-top: 12px; }
.poc .poc-grid .poc-btn{ align-self: center; width: min(230px, 100%); margin-top: 16px; }
.poc .poc-grid .poc-rating{ justify-content: center; margin-top: 16px; }

@media (max-width: 1024px) {
	.poc .poc-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
	.poc .poc-featured .poc-body{ display: flex; flex-direction: column; gap: 14px; padding: 22px 24px 24px; }
	.poc .poc-featured .poc-logo{ position: absolute; top: 16px; right: 16px; }
	.poc .poc-featured .poc-btn{ align-self: flex-start; }
}
@media (max-width: 767px) {
	.poc .poc-heading{ font-size: 34px; }
	.poc .poc-intro, .poc .poc-viewall{ font-size: 17px; line-height: 22px; }
	.poc .poc-featured{ margin-top: 28px; }
	.poc .poc-featured .poc-card{ flex-direction: column; }
	.poc .poc-featured .poc-media{ flex: none; aspect-ratio: 392 / 251; border-radius: 10px 10px 0 0; }
	.poc .poc-featured .poc-btn{ align-self: stretch; }
	.poc .poc-grid{ grid-template-columns: 1fr; gap: 20px; margin-top: 32px; }
	.poc .poc-grid .poc-card{ min-height: 0; }
	.poc .poc-duration{ font-size: 24px; }
}