section {
/*------------------------------------------------------------------------------------------------------|HERO SLIDER|---*/
    &[data-type="hero-slider"] {
        #hero-slider {
            height: calc(100dvh - 75px);

            &::after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: linear-gradient(180deg,rgba(11, 12, 16, 0) 50%, rgba(11, 12, 16, 1) 90%);
                pointer-events: none;
            }

            .background-image {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-size: cover;
                background-repeat: no-repeat;
                background-position: center;

                &::after {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background-color: rgba(0,0,0,0.3);
                }
            }

            container {
                height: 100%;
        
                .text-container {
                    display: flex;
                    align-items: start;
                    justify-content: center;
                    flex-direction: column;
                    width: 50%;
                    height: 100%;
                    transform: translateY(-75px);

                    .date {
                        margin: 0;
                    }
                    .title {
                        font-size: clamp(2.5rem, 8vw, 4rem);
                        line-height: clamp(2.5rem, 8vw, 4rem);;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;  
                        overflow: hidden;
                        padding-bottom: 10px;
                        margin-bottom: 40px;

                        &::first-letter {
                            color: var(--blue);
                        }
                    }
                    .button {
                        display: inline-flex;
                        align-items: center;
                        justify-content: center;

                        &::after {
                            content: url('../svg/icon-box-arrow.svg');
                            position: relative;
                            display: block;
                            width: 20px;
                            height: auto;
                            margin-left: 10px;
                            transform: translateY(3px);
                        }
                    }
                }
            }
        }
        .scroll {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            z-index: 3;

            .icon {
                width: 30px;
                height: auto;

                &.icon-arrow {
                    margin-top: 30px;
                    animation: anim-scroll-down 1500ms infinite cubic-bezier(0.445, 0.05, 0.55, 0.95);
                }
            }
        }
    }

/*---------------------------------------------------------------------------|LATEST ARTICLES & MOST VIEWED ARTICLES|---*/
    &[data-type="latest-articles"], &[data-type="most-viewed-articles"] {
        .header {
            margin-bottom: 20px;
        }
        cards {
            display: grid;
            grid-gap: 20px;
            grid-template-columns: repeat(3,1fr);

            card {
                position: relative;
                display: block;
                width: 100%;
                height: auto;
                aspect-ratio: 12/8;
                border-radius: 30px;
                background-size: cover;
                background-repeat: no-repeat;
                background-position: center;
                overflow: clip;
                
                a {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    display: flex;
                    align-items: end;
                    transform: translateY(80px);
                    transition: all 0.3s ease-in-out;

                    .text-container {
                        display: grid;
                        grid-gap: 20px;
                        grid-template-columns: 1fr 40px;
                        padding: 20px;

                        .title {
                            display: -webkit-box;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;  
                            overflow: hidden;
                        }
                        .icon {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                        }
                    }
                }
            }
        }
    }

/*---------------------------------------------------------------------------------------------------------|ARTICLES|---*/
    &[data-type="articles"] {
        .header {
            text-align: center;
            margin-bottom: 20px;
        }
        #category-filter {
            text-align: center;
            margin-bottom: 30px;

            button {
                color: var(--white);
                font-family: 'segoe';
                font-weight: 600;
                font-size: clamp(1rem, 2vw, 1.2rem);
                background-color: transparent;
                border-radius: 10px;
                min-width: 100px;
                padding: 10px 20px;
                margin-left: 5px;
                margin-right: 5px;
                margin-bottom: 10px;
                cursor: pointer;

                &.active {
                    color: var(--blue);
                    -webkit-box-shadow: 0px 0px 10px 1px var(--blue);
                    -moz-box-shadow: 0px 0px 10px 1px var(--blue);
                    box-shadow: 0px 0px 10px 1px var(--blue);
                }
            }
        }
        cards {
            display: grid;
            grid-gap: 20px;
            grid-template-columns: repeat(4,1fr);

            card {
                div[data-tag="image"] {
                    aspect-ratio: 1/1;
                    border-radius: 30px;
                    margin-bottom: 20px;
                }
                .text-container {
                    .title {
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;  
                        overflow: hidden;
                    }
                }
            }
        }
        #loader {
            margin-top: 80px;

            .dot-falling {
                position: relative;
                left: -9999px;
                width: 10px;
                height: 10px;
                border-radius: 5px;
                background-color: var(--white);
                color: var(--white);
                box-shadow: 9999px 0 0 0 var(--white);
                animation: dot-falling 1s infinite linear;
                animation-delay: 0.1s;
                margin-left: auto;
                margin-right: auto;

                &::before, &::after {
                    content: "";
                    display: inline-block;
                    position: absolute;
                    top: 0;
                }
                &::before {
                    width: 10px;
                    height: 10px;
                    border-radius: 5px;
                    background-color: var(--white);
                    color: var(--white);
                    animation: dot-falling-before 1s infinite linear;
                    animation-delay: 0s;
                }
                &::after {
                    width: 10px;
                    height: 10px;
                    border-radius: 5px;
                    background-color: var(--white);
                    color: var(--white);
                    animation: dot-falling-after 1s infinite linear;
                    animation-delay: 0.2s;
                }
            }
        }
        #no-more-posts {
            margin-top: 80px;

            p {
                text-align: center;
            }
        }
    }

/*--------------------------------------------------------------------------------|SINGLE POST/ARTICLE - HERO BANNER|---*/
    &[data-type="article-hero-banner"] {
        height: calc(100dvh - 75px);

        &::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(180deg,rgba(11, 12, 16, 0) 50%, rgba(11, 12, 16, 1) 90%);
            pointer-events: none;
        }
        .background-image {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;

            &::after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: rgba(0,0,0,0.3);
            }
        }
        container {
            height: 100%;
    
            .text-container {
                display: flex;
                align-items: start;
                justify-content: center;
                flex-direction: column;
                width: 100%;
                height: 100%;

                .date {
                    margin: 0;
                }
                .title {
                    font-size: clamp(2.5rem, 8vw, 4rem);
                    line-height: clamp(2.5rem, 8vw, 4rem);
                    padding-bottom: 10px;
                    margin-bottom: 40px;

                    &::first-letter {
                        color: var(--blue);
                    }
                }
            }
        }
    }

/*----------------------------------------------------------------------------------|SINGLE POST/ARTICLE - TEXT ONLY|---*/
    &[data-type="article-text-only"] {
        &:not(:last-child) {
            padding-bottom: 0px !important;
        }
        container {
            width: 60%;
        }
    }

/*----------------------------------------------------------------------------|SINGLE POST/ARTICLE - IMAGE WITH TEXT|---*/
    &[data-type="article-image-with-text"] {
        &:not(:last-child) {
            padding-bottom: 0px !important;
        }
        container {
            width: 60%;
            .columns {
                display: grid;
                grid-gap: 40px;

                &.img-size--small {
                    &.img-pos--left {
                        grid-template-columns: 1fr 2fr;
                    }
                    &.img-pos--right {
                        grid-template-columns: 2fr 1fr;
                    }
                }
                &.img-size--medium {
                    grid-template-columns: 1fr 1fr;
                }
                &.img-size--large {
                    &.img-pos--left {
                        grid-template-columns: 2fr 1fr;
                    }
                    &.img-pos--right {
                        grid-template-columns: 1fr 2fr;
                    }
                }
                &.img-pos--left {
                    .image-wrapper {
                        order: 1;
                    }
                    .text-wrapper {
                        order: 2;
                    }
                }
                &.img-pos--right {
                    .image-wrapper {
                        order: 2;
                    }
                    .text-wrapper {
                        order: 1;
                    }
                }
                .image-wrapper {
                    [data-tag="image"] {
                        border-radius: 20px;
                    }
                    .caption {
                        margin: 10px 20px 0 20px;
                    }
                }
            }
        }
    }

/*---------------------------------------------------------------------------------|SINGLE POST/ARTICLE - IMAGE ONLY|---*/
    &[data-type="article-image-only"] {
        &:not(:last-child) {
            padding-bottom: 0px !important;
        }
        container {
            width: 60%;

            .image-wrapper {
                [data-tag="image"] {
                    border-radius: 20px;
                }
                .caption {
                    margin: 10px 20px 0 20px;
                }
            }
        }
    }
}

/*-------------------------------------------------------------------------------------------------------|RESPONSIVE|---*/
@media screen and (min-width: 1024px) {
    section {
    /*-----------------------------------------------------------------------|LATEST ARTICLES & MOST VIEWED ARTICLES|---*/
        &[data-type="latest-articles"], &[data-type="most-viewed-articles"] {
            cards {
                card {
                    &:hover {
                        -webkit-box-shadow: 0px 2px 10px 1px var(--blue);
                        -moz-box-shadow: 0px 2px 10px 1px var(--blue);
                        box-shadow: 0px 2px 10px 1px var(--blue);
                        
                        &:before {
                            content: '';
                            position: absolute;
                            top: 0;
                            left: 0;
                            right: 0;
                            bottom: 0;
                            background-color: rgba(0,0,0,0.3);
                        }
                        a {
                            transform: translateY(0);
                            background: linear-gradient(180deg,rgba(11, 12, 16, 0) 50%, rgba(11, 12, 16, 1) 100%);
                        }
                    }
                }
            }
        }
    }
}
@media screen and (max-width: 1024px) {
    section {
    /*--------------------------------------------------------------------------------------------------|HERO SLIDER|---*/
        &[data-type="hero-slider"] {
            & #hero-slider {
                & container {
                    & .text-container {
                        width: 80% !important;
                    }
                }
            }
        }
    /*-----------------------------------------------------------------------|LATEST ARTICLES & MOST VIEWED ARTICLES|---*/
        &[data-type="latest-articles"], &[data-type="most-viewed-articles"] {
            cards {
                grid-template-columns: repeat(1,1fr) !important;

                card {
                    a {
                        transform: translateY(0);
                        background: linear-gradient(180deg,rgba(11, 12, 16, 0) 50%, rgba(11, 12, 16, 1) 100%);
                    }
                }
            }
        }
    /*-----------------------------------------------------------------------------------------------------|ARTICLES|---*/
        &[data-type="articles"] {
            cards {
                grid-template-columns: repeat(2,1fr) !important;
            }
        }
    /*------------------------------------------------------------------------------|SINGLE POST/ARTICLE - TEXT ONLY|---*/
        &[data-type="article-text-only"] {
            container {
                width: 80% !important;
            }
        }
    /*------------------------------------------------------------------------|SINGLE POST/ARTICLE - IMAGE WITH TEXT|---*/
        &[data-type="article-image-with-text"] {
            container {
                width: 80% !important;
                
                .columns {
                    grid-template-columns: 1fr !important;
                    grid-gap: 10px !important;

                    .image-wrapper {
                        order: 1 !important;
                    }
                    .text-wrapper {
                        order: 2 !important;
                    }
                }
            }
        }
    /*-----------------------------------------------------------------------------|SINGLE POST/ARTICLE - IMAGE ONLY|---*/
        &[data-type="article-image-only"] {
            container {
                width: 80% !important;
            }
        }
    }
}
@media screen and (max-width: 600px) {
    section {
    /*--------------------------------------------------------------------------------------------------|HERO SLIDER|---*/
        &[data-type="hero-slider"] {
            & #hero-slider {
                & container {
                    & .text-container {
                        width: 90% !important;

                        .title {
                            padding-bottom: 0 !important;
                        }
                    }
                }
            }
        }
    /*-----------------------------------------------------------------------------------------------------|ARTICLES|---*/
        &[data-type="articles"] {
            cards {
                grid-template-columns: repeat(1,1fr) !important;
            }
        }
    } 
}