@sp-days-framework/docusaurus-frontpage-collection 1.0.0

package/lib/components/Columns/styles.module.css

@@ -0,0 +1,196 @@
+/**
+ * Columns component styles
+ */
+
+.columnsContainer {
+  display: grid;
+  grid-template-columns: 1fr 1fr; /* Default 50/50 - will be overridden by inline styles */
+  padding: 0.5rem 1rem 1rem 1rem;
+  gap: 1.5rem;
+  width: 100%;
+  container-type: inline-size; /* Enable container queries */
+  max-width: 100%;
+  min-width: 0; /* Allows grid items to shrink below content size if needed */
+}
+
+.leftColumn, .rightColumn {
+  min-width: 0; /* Critical for grid items to allow them to be smaller than content */
+  overflow: hidden; /* Prevent content from overflowing the column */
+  max-width: 100%; /* Ensure the column doesn't exceed its allocated width */
+  position: relative; /* Create a positioning context for absolute elements */
+}
+
+.columnContent {
+  height: 100%;
+  width: 100%;
+  word-wrap: break-word; /* Ensures text wraps properly */
+  overflow-wrap: break-word;
+  word-break: break-word; /* Handle long words better */
+  hyphens: auto; /* Add hyphens for very long words */
+  overflow: hidden; /* Hide any overflow */
+}
+
+/* Container specifically for MDX content */
+.mdxContainer {
+  width: 100%;
+  max-width: 100%;
+  overflow-wrap: anywhere; /* Force wrapping anywhere if needed */
+  /* Reset some MDX defaults that might cause issues */
+  display: block;
+  position: relative;
+}
+
+/* Ensure MDX elements have proper width constraints */
+.mdxContainer > :global(*) {
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+/* Force paragraphs to wrap properly */
+.mdxContainer :global(p) {
+  width: 100%;
+  max-width: 100%;
+  white-space: normal;
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
+
+/* Specifically handle list elements which often cause overflow */
+.mdxContainer :global(ul),
+.mdxContainer :global(ol) {
+  width: 100%;
+  max-width: 100%;
+  padding-left: 1.5rem; /* Reduce default padding */
+  box-sizing: border-box;
+}
+
+.mdxContainer :global(li) {
+  width: 100%;
+  max-width: 100%;
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
+
+/* Handle markdown table formatting */
+.mdxContainer :global(table) {
+  table-layout: fixed; /* Fixed table layout helps with column width control */
+  width: 100%;
+}
+
+/* Apply line breaking to all potential inline elements in MDX */
+.mdxContainer :global(span),
+.mdxContainer :global(a),
+.mdxContainer :global(strong),
+.mdxContainer :global(em),
+.mdxContainer :global(code) {
+  word-break: break-word;
+  overflow-wrap: break-word;
+}
+
+/* Ensure all content inside columns respects boundaries */
+.columnContent :global(*) {
+  max-width: 100%;
+}
+
+/* Handle specific elements that commonly cause overflow */
+.columnContent :global(pre),
+.columnContent :global(code) {
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+/* Handle tables */
+.columnContent :global(table) {
+  display: block;
+  overflow-x: auto;
+  max-width: 100%;
+}
+
+/* Handle images */
+.columnContent :global(img) {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Handle other potentially overflowing elements */
+.columnContent :global(iframe),
+.columnContent :global(video),
+.columnContent :global(.embed-responsive) {
+  max-width: 100%;
+}
+
+/* Responsive adjustments based on container width */
+/* Responsive adjustments based on container width */
+@container (max-width: 900px) {
+  .leftColumn, .rightColumn {
+    font-size: 0.95rem;
+  }
+  
+  .leftColumn h2, .rightColumn h2 {
+    font-size: 1.4rem;
+  }
+  
+  .leftColumn h3, .rightColumn h3 {
+    font-size: 1.2rem;
+  }
+  
+  /* Make tables scroll horizontally with less space */
+  .columnContent :global(table) {
+    font-size: 0.9rem;
+  }
+}
+
+@container (max-width: 750px) {
+  .leftColumn, .rightColumn {
+    font-size: 0.9rem;
+  }
+  
+  .leftColumn h2, .rightColumn h2 {
+    font-size: 1.3rem;
+  }
+  
+  .leftColumn h3, .rightColumn h3 {
+    font-size: 1.1rem;
+  }
+  
+  /* Further reduce elements that tend to be wide */
+  .columnContent :global(table) {
+    font-size: 0.85rem;
+  }
+  
+  .columnContent :global(pre),
+  .columnContent :global(code) {
+    font-size: 0.85rem;
+  }
+}
+
+/* Only stack at very narrow container width */
+@container (max-width: 600px) {
+  .columnsContainer {
+    grid-template-columns: 1fr !important; /* Force single column */
+    grid-auto-rows: auto; /* Let content determine height */
+  }
+  
+  .leftColumn, .rightColumn {
+    width: 100% !important;
+    max-width: 100%;
+    grid-column: 1 / -1; /* Span all columns */
+    
+    /* Reset font sizes when stacked */
+    font-size: 1rem;
+  }
+  
+  .leftColumn h2, .rightColumn h2 {
+    font-size: 1.5rem;
+  }
+  
+  .leftColumn h3, .rightColumn h3 {
+    font-size: 1.25rem;
+  }
+  
+  .columnContent :global(table),
+  .columnContent :global(pre),
+  .columnContent :global(code) {
+    font-size: 0.9rem;
+  }
+}

package/lib/components/CourseFeature/index.d.ts

@@ -0,0 +1,99 @@
+import React from 'react';
+import type { WithChildren, IconifyConfig, CustomSvgConfig, CustomImageConfig } from '../../utils/types';
+export interface IncludedProps extends WithChildren {
+}
+export interface NotIncludedProps extends WithChildren {
+}
+export interface CourseFeatureProps extends WithChildren {
+    /** Legacy prop - whether content is included (default: true) */
+    included?: boolean;
+    /** Iconify icon for included features */
+    iconifyIncluded?: IconifyConfig | string;
+    /** Custom SVG for included features */
+    customSvgIncluded?: CustomSvgConfig;
+    /** Custom image for included features */
+    customImageIncluded?: CustomImageConfig;
+    /** Iconify icon for not included features */
+    iconifyNotIncluded?: IconifyConfig | string;
+    /** Custom SVG for not included features */
+    customSvgNotIncluded?: CustomSvgConfig;
+    /** Custom image for not included features */
+    customImageNotIncluded?: CustomImageConfig;
+}
+/**
+ * Included Component
+ *
+ * Wrapper for content that is included in the course.
+ * Must be used as a child of CourseFeature component.
+ *
+ * @example
+ * ```tsx
+ * <CourseFeature>
+ *   <Included>
+ *     - Feature 1
+ *     - Feature 2
+ *   </Included>
+ *   <NotIncluded>
+ *     - Not this
+ *   </NotIncluded>
+ * </CourseFeature>
+ * ```
+ */
+export declare const Included: React.FC<IncludedProps>;
+/**
+ * NotIncluded Component
+ *
+ * Wrapper for content that is not included in the course.
+ * Must be used as a child of CourseFeature component.
+ *
+ * @example
+ * ```tsx
+ * <CourseFeature>
+ *   <Included>
+ *     - Feature 1
+ *   </Included>
+ *   <NotIncluded>
+ *     - Not included
+ *   </NotIncluded>
+ * </CourseFeature>
+ * ```
+ */
+export declare const NotIncluded: React.FC<NotIncludedProps>;
+/**
+ * CourseFeature Component
+ *
+ * Container for displaying course features in a card layout.
+ * Supports both Included/NotIncluded child components or direct content.
+ *
+ * @example
+ * ```tsx
+ * // Using Included/NotIncluded components
+ * <CourseFeature>
+ *   <Included>
+ *     - Docker Fundamentals
+ *     - Container Management
+ *   </Included>
+ *   <NotIncluded>
+ *     - Kubernetes
+ *   </NotIncluded>
+ * </CourseFeature>
+ *
+ * // With custom icons
+ * <CourseFeature
+ *   iconifyIncluded="mdi:check-circle"
+ *   iconifyNotIncluded="mdi:close-circle"
+ * >
+ *   <Included>Content</Included>
+ *   <NotIncluded>Not included</NotIncluded>
+ * </CourseFeature>
+ *
+ * // Legacy single card usage
+ * <CourseFeature included={true}>
+ *   - Feature 1
+ *   - Feature 2
+ * </CourseFeature>
+ * ```
+ */
+export declare const CourseFeature: React.FC<CourseFeatureProps>;
+export default CourseFeature;
+//# sourceMappingURL=index.d.ts.map

package/lib/components/CourseFeature/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CourseFeature/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAItC,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAGzG,MAAM,WAAW,aAAc,SAAQ,YAAY;CAAG;AAEtD,MAAM,WAAW,gBAAiB,SAAQ,YAAY;CAAG;AAEzD,MAAM,WAAW,kBAAmB,SAAQ,YAAY;IACtD,gEAAgE;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yCAAyC;IACzC,eAAe,CAAC,EAAE,aAAa,GAAG,MAAM,CAAC;IACzC,uCAAuC;IACvC,iBAAiB,CAAC,EAAE,eAAe,CAAC;IACpC,yCAAyC;IACzC,mBAAmB,CAAC,EAAE,iBAAiB,CAAC;IACxC,6CAA6C;IAC7C,kBAAkB,CAAC,EAAE,aAAa,GAAG,MAAM,CAAC;IAC5C,2CAA2C;IAC3C,oBAAoB,CAAC,EAAE,eAAe,CAAC;IACvC,6CAA6C;IAC7C,sBAAsB,CAAC,EAAE,iBAAiB,CAAC;CAC5C;AA6BD;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAQ5C,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAQlD,CAAC;AA2CF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAsGtD,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/CourseFeature/index.js

@@ -0,0 +1,188 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CourseFeature = exports.NotIncluded = exports.Included = void 0;
+const react_1 = __importStar(require("react"));
+const clsx_1 = __importDefault(require("clsx"));
+const react_2 = require("@mdx-js/react");
+const ThemedIcon_1 = require("../../utils/ThemedIcon");
+const styles_module_css_1 = __importDefault(require("./styles.module.css"));
+// Inline SVG icons as default
+const CheckIcon = () => (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "30", height: "30", viewBox: "0 0 24 24", className: styles_module_css_1.default.defaultIcon },
+    react_1.default.createElement("path", { fill: "var(--ifm-color-success)", d: "M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10s10-4.5 10-10S17.5 2 12 2m-2 15l-5-5l1.41-1.41L10 14.17l7.59-7.59L19 8z" })));
+const CrossIcon = () => (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "30", height: "30", viewBox: "0 0 24 24", className: styles_module_css_1.default.defaultIcon },
+    react_1.default.createElement("path", { fill: "var(--ifm-color-danger)", d: "M12 2c5.53 0 10 4.47 10 10s-4.47 10-10 10S2 17.53 2 12S6.47 2 12 2m3.59 5L12 10.59L8.41 7L7 8.41L10.59 12L7 15.59L8.41 17L12 13.41L15.59 17L17 15.59L13.41 12L17 8.41z" })));
+/**
+ * Included Component
+ *
+ * Wrapper for content that is included in the course.
+ * Must be used as a child of CourseFeature component.
+ *
+ * @example
+ * ```tsx
+ * <CourseFeature>
+ *   <Included>
+ *     - Feature 1
+ *     - Feature 2
+ *   </Included>
+ *   <NotIncluded>
+ *     - Not this
+ *   </NotIncluded>
+ * </CourseFeature>
+ * ```
+ */
+const Included = ({ children }) => {
+    return (react_1.default.createElement("div", { className: styles_module_css_1.default.featureContent },
+        react_1.default.createElement(react_2.MDXProvider, null, children)));
+};
+exports.Included = Included;
+/**
+ * NotIncluded Component
+ *
+ * Wrapper for content that is not included in the course.
+ * Must be used as a child of CourseFeature component.
+ *
+ * @example
+ * ```tsx
+ * <CourseFeature>
+ *   <Included>
+ *     - Feature 1
+ *   </Included>
+ *   <NotIncluded>
+ *     - Not included
+ *   </NotIncluded>
+ * </CourseFeature>
+ * ```
+ */
+const NotIncluded = ({ children }) => {
+    return (react_1.default.createElement("div", { className: styles_module_css_1.default.featureContent },
+        react_1.default.createElement(react_2.MDXProvider, null, children)));
+};
+exports.NotIncluded = NotIncluded;
+/**
+ * Feature Card Component - Internal component for both included and not included features
+ */
+const FeatureCard = ({ isIncluded, children, iconify, customSvg, customImage, style }) => {
+    const title = isIncluded ? 'Included' : 'Not Included';
+    const titleClassName = isIncluded
+        ? styles_module_css_1.default.coverageTitleIncluded
+        : styles_module_css_1.default.coverageTitleNotIncluded;
+    return (react_1.default.createElement("div", { className: styles_module_css_1.default.coverageCard, style: style },
+        react_1.default.createElement("div", { className: (0, clsx_1.default)(styles_module_css_1.default.coverageTitleWrapper, titleClassName) },
+            react_1.default.createElement("div", { className: styles_module_css_1.default.coverageIconWrapper }, (iconify || customSvg || customImage) ? (react_1.default.createElement(ThemedIcon_1.ThemedIcon, { iconify: iconify, customSvg: customSvg, customImage: customImage, alt: title, className: styles_module_css_1.default.coverageIcon, supportsHover: false })) : (isIncluded ? react_1.default.createElement(CheckIcon, null) : react_1.default.createElement(CrossIcon, null))),
+            react_1.default.createElement("h2", null, title)),
+        react_1.default.createElement("div", { className: styles_module_css_1.default.coverageContent }, children)));
+};
+/**
+ * CourseFeature Component
+ *
+ * Container for displaying course features in a card layout.
+ * Supports both Included/NotIncluded child components or direct content.
+ *
+ * @example
+ * ```tsx
+ * // Using Included/NotIncluded components
+ * <CourseFeature>
+ *   <Included>
+ *     - Docker Fundamentals
+ *     - Container Management
+ *   </Included>
+ *   <NotIncluded>
+ *     - Kubernetes
+ *   </NotIncluded>
+ * </CourseFeature>
+ *
+ * // With custom icons
+ * <CourseFeature
+ *   iconifyIncluded="mdi:check-circle"
+ *   iconifyNotIncluded="mdi:close-circle"
+ * >
+ *   <Included>Content</Included>
+ *   <NotIncluded>Not included</NotIncluded>
+ * </CourseFeature>
+ *
+ * // Legacy single card usage
+ * <CourseFeature included={true}>
+ *   - Feature 1
+ *   - Feature 2
+ * </CourseFeature>
+ * ```
+ */
+const CourseFeature = ({ children, included, iconifyIncluded, customSvgIncluded, customImageIncluded, iconifyNotIncluded, customSvgNotIncluded, customImageNotIncluded }) => {
+    const containerRef = (0, react_1.useRef)(null);
+    // Handle direct children vs. Included/NotIncluded components
+    const hasCustomComponents = react_1.default.Children.toArray(children).some((child) => react_1.default.isValidElement(child) && (child.type === exports.Included || child.type === exports.NotIncluded));
+    if (hasCustomComponents) {
+        // Find Included and NotIncluded components
+        let includedContent = null;
+        let notIncludedContent = null;
+        react_1.default.Children.forEach(children, (child) => {
+            if (react_1.default.isValidElement(child)) {
+                if (child.type === exports.Included) {
+                    includedContent = child.props.children;
+                }
+                else if (child.type === exports.NotIncluded) {
+                    notIncludedContent = child.props.children;
+                }
+            }
+        });
+        // If we have both components, render them in a flex container
+        if (includedContent && notIncludedContent) {
+            return (react_1.default.createElement("div", { className: styles_module_css_1.default.coverageContainer, ref: containerRef },
+                react_1.default.createElement("div", { className: styles_module_css_1.default.equalHeightWrapper },
+                    react_1.default.createElement(FeatureCard, { isIncluded: true, iconify: iconifyIncluded, customSvg: customSvgIncluded, customImage: customImageIncluded }, includedContent),
+                    react_1.default.createElement(FeatureCard, { isIncluded: false, iconify: iconifyNotIncluded, customSvg: customSvgNotIncluded, customImage: customImageNotIncluded }, notIncludedContent))));
+        }
+        // If we only have one component, render just that one
+        if (includedContent) {
+            return (react_1.default.createElement(FeatureCard, { isIncluded: true, iconify: iconifyIncluded, customSvg: customSvgIncluded, customImage: customImageIncluded }, includedContent));
+        }
+        if (notIncludedContent) {
+            return (react_1.default.createElement(FeatureCard, { isIncluded: false, iconify: iconifyNotIncluded, customSvg: customSvgNotIncluded, customImage: customImageNotIncluded }, notIncludedContent));
+        }
+    }
+    // Legacy support - direct children and included prop
+    const isIncluded = included !== false;
+    const iconify = isIncluded ? iconifyIncluded : iconifyNotIncluded;
+    const customSvg = isIncluded ? customSvgIncluded : customSvgNotIncluded;
+    const customImage = isIncluded ? customImageIncluded : customImageNotIncluded;
+    return (react_1.default.createElement(FeatureCard, { isIncluded: isIncluded, iconify: iconify, customSvg: customSvg, customImage: customImage }, children));
+};
+exports.CourseFeature = CourseFeature;
+exports.default = exports.CourseFeature;
+//# sourceMappingURL=index.js.map

package/lib/components/CourseFeature/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CourseFeature/index.tsx"],"names":[],"mappings":"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"}

package/lib/components/CourseFeature/styles.module.css

@@ -0,0 +1,204 @@
+/**
+ * Course Feature component styles
+ */
+
+/* Container to hold both feature cards */
+.coverageContainer {
+  margin-bottom: 1.5rem;
+  width: 100%;
+  container-type: inline-size; /* Enable container queries */
+}
+
+/* Equal height wrapper to ensure both cards have the same height */
+.equalHeightWrapper {
+  display: flex;
+  gap: 1.5rem;
+  width: 100%;
+  flex-wrap: wrap;
+}
+
+/* Ensure cards maintain equal height */
+.equalHeightWrapper .coverageCard {
+  height: auto; /* Let the height be determined by the tallest card */
+  flex: 1 1 0; /* Equal width with ability to grow */
+}
+
+/* Individual feature card */
+.coverageCard {
+  height: 100%;
+  padding: 1.5rem;
+  border-radius: 8px;
+  background-color: var(--ifm-color-emphasis-100);
+  box-shadow: var(--ifm-global-shadow-lw);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  display: flex;
+  flex-direction: column;
+  min-width: 200px;
+  container-type: inline-size; /* Enable container queries */
+}
+
+/* When card is alone (not in coverageContainer) */
+.coverageCard:only-child {
+  width: 100%;
+}
+
+/* Single consistent layout - Icon and title on top, content below */
+.coverageCard {
+  flex-direction: column;
+}
+
+/* Title wrapper styles */
+.coverageTitleWrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 1rem;
+  justify-content: center;
+  width: 100%;
+}
+
+.coverageIconWrapper {
+  margin-right: 0.75rem;
+  flex-shrink: 0;
+  display: inline-flex;
+}
+
+.coverageIcon {
+  width: 30px;
+  height: 30px;
+  transition: transform 0.3s ease;
+  display: flex;
+}
+
+/* Default icon style for inline SVG */
+.defaultIcon {
+  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+/* Content area */
+.coverageContent {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  width: 100%;
+  height: 100%; /* Ensure content takes full height */
+  align-items: flex-start;
+  text-align: left;
+}
+
+.featureContent {
+  width: 100%;
+  height: 100%; /* Ensure content takes full height */
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  text-align: left;
+}
+
+/* Hover effects */
+.coverageCard:hover .coverageIcon {
+  transform: scale(1.05);
+}
+
+.coverageCard:hover .defaultIcon {
+  transform: scale(1.05);
+}
+
+.coverageCard:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+}
+
+/* Typography */
+.coverageCard h2 {
+  margin-bottom: 0;
+  font-size: 1.5rem;
+}
+
+.coverageTitleIncluded h2 {
+  display: contents;
+  color: var(--ifm-color-success);
+}
+
+.coverageTitleNotIncluded h2 {
+  display: contents;
+  color: var(--ifm-color-danger);
+}
+
+/* List styling */
+.coverageCard ul {
+  margin-top: 20px !important;
+  margin-bottom: 0 !important;
+  align-self: flex-start;
+  width: 100%;
+}
+
+.coverageCard li {
+  margin-bottom: 0.75rem;
+}
+
+/* Container Responsive adjustments */
+@container (max-width: 400px) {
+  .coverageCard {
+    font-size: 0.95rem;
+  }
+
+  .coverageCard h2 {
+    font-size: 1.4rem;
+  }
+}
+
+@container (max-width: 350px) {
+  .coverageCard {
+    font-size: 0.9rem;
+    padding: 1.25rem;
+  }
+
+  .coverageCard h2 {
+    font-size: 1.3rem;
+  }
+
+  .coverageCard li {
+    margin-bottom: 0.6rem;
+  }
+
+  .coverageIcon {
+    width: 25px;
+    height: 25px;
+  }
+}
+
+@container (max-width: 500px) {
+  .coverageCard ul {
+    padding-left: 20px;
+  }
+}
+
+/* Container responsiveness */
+@container (max-width: 600px) {
+  .equalHeightWrapper {
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  .equalHeightWrapper .coverageCard {
+    width: 100%;
+    flex: 1 1 auto;
+  }
+}
+
+/* Fallback for browsers that don't support container queries */
+@media (max-width: 768px) {
+  .equalHeightWrapper {
+    flex-direction: column;
+  }
+
+  .equalHeightWrapper .coverageCard {
+    width: 100%;
+    margin-bottom: 1.5rem;
+  }
+
+  .equalHeightWrapper .coverageCard:last-child {
+    margin-bottom: 0;
+  }
+}