/* Variables - Mobile First */
        :root {
            --primary-color: #4CAF50; 
            --secondary-color: #ffffff; 
            --text-color: #333333; 
            --light-gray: #f5f5f5;
            --medium-gray: #e0e0e0;
            --dark-gray: #757575;
            --font-main: 'estedad', Tahoma, sans-serif;
            --font-size-small: 0.875rem;
            --font-size-normal: 1rem;
            --font-size-medium: 1.25rem;
            --font-size-large: 1.5rem;
            --font-size-xlarge: 2rem;
            --spacing-small: 0.5rem;
            --spacing-normal: 1rem;
            --spacing-medium: 1.5rem;
            --spacing-large: 2rem;
            --spacing-xlarge: 3rem;
            --border-radius: 4px;
            --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            --transition: all 0.3s ease;
        }

        img {
            max-width: 100%;
            height: auto;
            display: block;
            margin:auto; 
        }

        /* Layout Components */
        .container {
            width: 100%;
            padding: 0 var(--spacing-normal);
            margin: 0 auto;
        }

        /* Article Header */
        .post-header {
            margin: var(--spacing-medium) 0;
        }

        .featured-image {
            border-radius: var(--border-radius);
            overflow: hidden;
        }

        .post-title {
            font-size: var(--font-size-large);
            color: var(--text-color);
            padding:var(--spacing-small) var(--spacing-medium);
            line-height: 1.8;
            text-align:center;
        }

        .post-meta {
            display: flex;
            line-height:3;
            flex-wrap: wrap;
            justify-content:center;
            margin-bottom: var(--spacing-medium);
            color: var(--dark-gray);
            font-size: var(--font-size-small);
        }

        .post-meta div{
            flex:1 1 auto;
            background:var(--light-gray);
            padding-right:var(--spacing-small);
        }

        .post-meta div:before{
            content:">";
            font-weight:bold;
            padding:var(--spacing-small);
        }

        .post-excerpt {
            font-size: var(--font-size-normal);
            color: var(--dark-gray);
            margin-bottom: var(--spacing-medium);
            padding-bottom: var(--spacing-normal);
            border-bottom: 1px solid var(--medium-gray);
            text-align:justify;
        }

        /* Media Elements */
        .media-container {
            margin: var(--spacing-medium) 0;
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--box-shadow);
        }

        .media-container video,
        .media-container audio {
            width: 100%;
            display: block;
        }

        /* Article Content */
        .post-content {
            margin: var(--spacing-medium) 0;
            padding:var(--spacing-normal);
        }

        .post-content p {
            margin-bottom: var(--spacing-normal);
        }

		.article-navigation div{
			line-height:2;
			padding:var(--spacing-small) 0;
			border-bottom:1px solid var(--medium-gray);
		}

		.article-navigation div:last-child{
			border-bottom:none;
		}

        /* Tablet Styles */
        @media (min-width: 768px) {
            :root {
                --font-size-small: 0.9375rem;
                --font-size-normal: 1.125rem;
                --font-size-medium: 1.5rem;
                --font-size-large: 1.75rem;
                --font-size-xlarge: 2.5rem;
                --spacing-normal: 1.25rem;
                --spacing-medium: 2rem;
                --spacing-large: 2.5rem;
                --spacing-xlarge: 4rem;
            }

            .container {
                max-width: 720px;
            }

            .post-header {
                margin: var(--spacing-large) 0;
            }
        }

        /* Desktop Styles */
        @media (min-width: 992px) {
            .container {
                max-width: 960px;
            }

            .post-layout {
                display: grid;
                grid-template-columns: 1fr 400px;
                gap: var(--spacing-large);
            }

            .post-main {
                grid-column: 1;
            }

            .post-sidebar {
                grid-column: 2;
                padding:var(--spacing-normal);
                background:var(--light-gray);
            }

            .post-title {
                font-size: var(--font-size-xlarge);
            }
        }

        /* Large Desktop Styles */
        @media (min-width: 1200px) {
            .container {
                max-width: 1140px;
            }
        }