img.home-banner-pic.banner-image
{
    width                           : 100%;
    height                          : auto;
    border-radius                   : 10px;
}

.banner-text
{
    max-width                       : 50%;
    position                        : absolute;
    top                             : 50%;
    left                            : 30%;
    transform                       : translate(-50%, -50%);
    font-size                       : 3vw;
    font-weight                     : bold;
    padding                         : 10px 20px;
    border-radius                   : 5px;
    color                           : #ffffff;
}

.home-banner 
{
    position                        : relative;
    text-align                      : center;
    color                           : white;
    margin                          : 0 0%;
}
.cat-links-container, .home-posts-container
{
    display                         : grid;
    gap                             : 1%;
    margin                          : 0 8%;
    margin-top                      : 3%;
}
.cat-links-container
{
    grid-template-rows              : repeat(2, 1fr);
    grid-template-columns           : repeat(3, 1fr);
}

.home-posts-container
{
    grid-template-rows              : repeat(1, 1fr);
    grid-template-columns           : repeat(3, 1fr);
}

.cat-item 
{
    position                        : relative;
    overflow                        : hidden;
}

.cat-card 
{
    margin                          : 2% 2%;
}

.cat-card-text
{
    position                        : absolute;
    top                             : 50%;
    left                            : 50%;
    transform                       : translate(-50%, -50%);
    font-size                       : 2vw;
    max-width                       : 60%;
    color                           : #ffffff;
    font-weight                     : bold;
    line-height                     : 1.0;
}

.cat-card-bar
{
    position                        : absolute; 
    bottom                          : 0; 
    left                            : 0; 
    width                           : 100%; 
    height                          : 12px; 
    border-bottom-right-radius      : 8px;
    border-bottom-left-radius       : 8px;
}
.cat-card-cont
{
    position                        : relative;
    text-align                      : center;
    color                           : white;
    overflow                        : hidden;
    border-radius                   : 20px;
}

.cat-card-img
{
    width                           : 100%;
    height                          : auto;
    border-top-left-radius          : 15px;
    border-top-right-radius         : 15px;
    object-fit                      : cover;
    border-radius                   : 15px;
}

.cat-card-img:hover
{
    transform                       : scale(1.25);
    transition                      : transform 0.4s ease;
}

.cat-links-container
{
    margin-bottom                   : 5%;
}
.home-title-articles
{
    font-size                       : 2vw;
    font-weight                     : bold;
    margin-right                    : 8%;
    margin-left                     : 8%;
    margin-top                      : 2%;
    margin-bottom                   : 0;
}
.home-posts-container
{
    margin                          : 3% 8%;
}
.home-post-title
{
    min-height                      : calc(3 * 1.6em);
}
.home-post-archive-image
{
    border-radius                   : 10px;
}
.featured-image
{
    width                           : 100%;
    height                          : auto;
    border-radius                   : 10px;
    object-fit                      : cover;
}
.main-post-card-content
{
    float                           : right; 
    width                           : 50%; 
    padding                         : 20px;
}
.main-post-info
{
    display                         : flex;
    flex-direction                  : column;
    gap                             : 10px;
}
.read-more
{
    display                         : inline-block; 
    margin-top                      : 10px; 
    padding                         : 10px 20px; 
    background-color                : #ffffff; 
    color                           : #041E42; 
    border                          : 1px solid #041E42; 
    text-decoration                 : none; 
    border-radius                   : 20px;
}
.texto-1-container
{
    margin                          : 2% 8%;
}
.main-post-card
{
    margin                          : 3% 8%; 
    overflow                        : hidden;
}
.main-post-card-thumbnail
{
    float                           : left; 
    width                           : 50%; 
    overflow                        : hidden;
}
.accordion-content 
{
    display                         : none;
    overflow                        : hidden;
    transition                      : max-height 0.35s ease, opacity 0.35s ease;
}

.accordion-content.show 
{
    display                         : block;
    max-height                      : 100vh;
    opacity                         : 1;
}

.accordion-overlay 
{
    position                        : fixed;
    top                             : 0;
    left                            : 0;
    width                           : 100%;
    height                          : 100%;
    background-color                : rgba(0, 0, 0, 0.5);
    opacity                         : 1;
    visibility                      : visible;
    transition                      : opacity 0.32s cubic-bezier(.4, 0, .6, 1) 80ms, visibility 0.32s step-start 80ms;
    z-index                         : 9998;
}
@media (max-width: 768px) 
{
    .main-post-card-thumbnail
    {
        width                       : 100%;
        height                      : auto;
        float                       : none;
    }
    .cat-links-container 
    {
        grid-template-rows          : repeat(3, 1fr);
        grid-template-columns       : repeat(2, 1fr);
    }
    .main-post-card
    {
        margin                      : 0 5% ;
        display                     : flex;
        flex-direction              : column;
        align-items                 : center;
        width                       : auto;
    }

    .main-post-card-thumbnail, .main-post-card-content
    {
        width                       : 100%;
        height                      : auto;
        float                       : none;
    }

    .main-post-card-content
    {
        margin-top                  : 10px;
    }

    .banner-text
    {
        max-width                   : 50%;
        top                         : 50%;
        left                        : 50%;
        transform                   : translate(-50%, -50%);
        font-size                   : 7vw;
    }

    .home-posts-container
    {
        display                     : flex;
        flex-direction              : column;
    }

    .home-post-preview-card
    {
        width                       : 100%;
        height                      : auto;
        display                     : flex;
        flex-direction              : column;
        align-items                 : center;
    }

    .home-title-articles
    {
        font-size                   : 7vw;
        line-height                 : 1.3;
        margin-bottom               : 1%;
    }

    .cat-card-text
    {
        top                         : 50%;
        left                        : 45%;
        font-size                   : 4.5vw;
        text-align                  : center; 
    }
    .accordion-content 
    {
        position                    : fixed;
        top                         : 0;
        left                        : 0;
        width                       : 100%;
        height                      : 100vh;
        background-color            : rgba(0, 0, 0, 0.8);
        z-index                     : 9999;
        overflow-y                  : auto;
        padding                     : 20px;
        box-sizing                  : border-box;
    }
}

@media (max-width: 480px) 
{
    .main-post-card-thumbnail
    {
        width                 : 100%;
        overflow              : hidden;
        height                : auto;
        float                 : none;
    }
    .main-post-card-img
    {
        aspect-ratio           : 1/1;

    }
    .cat-links-container 
    {
        width                       : 100%;
        max-width                   : 100vw;
        display                     : flex;
        flex-direction              : row;
        overflow-x                  : auto;
        overflow-y                  : hidden;
        gap                         : 5%;                           
        scroll-behavior             : smooth;
        margin                      : 7% 0;
        padding                     : 0 5%;
        -webkit-overflow-scrolling  : touch;
    }
    .cat-links-container  
    {
        scrollbar-width             : none; 
        -ms-overflow-style          : none; 
    }

    .cat-links-container ::-webkit-scrollbar 
    {
        display                     : none; 
    }
    .cat-card
    {
        min-width                   : 70vw;                     
        max-width                   : 70vw;
        aspect-ratio                : 1 / 1;                
        border-radius               : 12px;
        flex-shrink                 : 0;
        position                    : relative;
        overflow                    : hidden;
        box-shadow                  : 0 2px 6px rgba(0,0,0,0.1);
    }
    
    .main-post-card-content 
    {
        margin-top                  : 10px;
    }

    
    .main-post-card .overlay 
    {
        position                    : absolute;
        inset                       : 0;
        background                  : white;
        pointer-events              : none;
        z-index                     : 1;
        opacity                     : 0;
        transition                  : opacity 0.1s linear;
    }
}