.panel-footer {
    /*=============================*/
    /*=====----- GENERAL -----=====*/
    /*=============================*/

    position: relative;
    z-index: 20;
    text-align: center;
    color: var(--white);
    background: var(--black);

    .footer-main {
        position: relative;
        z-index: 3;

        &::before,
        &::after {
            position: absolute;
            inset: 0;
            display: block;
            content: '';
            pointer-events: none;
        }

        &::before {
            z-index: -2;
            background: var(--background-texture);
            opacity: 0.125;
        }

        &::after {
            z-index: -1;
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, var(--black));
        }
    }

    .footer-main-row,
    .logo-col,
    .footer-bottom {
        display: flex;
        flex-direction: column;
    }

    .footer-main-row {
        gap: var(--space-6);
        width: 100%;
        max-width: 1160px;
        padding: var(--space-10) var(--space-5);
        margin: 0 auto;
    }

    .logo-col {
        gap: 30px;
    }

    .footer-bottom {
        gap: var(--space-5);
    }

    .nav-col {
        margin-top: 10px;
    }

    .mobile-fixed {
        position: fixed;
        bottom: 0px;
        width: 100%;
        z-index: 9999;
    }

    /*==========================*/
    /*=====----- CTAs -----=====*/
    /*==========================*/

    .ctas {
        background: var(--white);
        color: var(--black);

        & > *:nth-child(3n - 2) .call-to-action {
            --bg-color: rgba(244, 138, 133, 0.90);
        }

        & > *:nth-child(3n - 1) .call-to-action {
            --bg-color: rgba(0, 180, 198, 0.80);
        }

        & > *:nth-child(3n) .call-to-action {
            --bg-color: rgba(94, 126, 56, 0.80);
        }
    }

    /*==========================*/
    /*=====----- LOGO -----=====*/
    /*==========================*/

    .logo-footer {
        width: 100%;
        max-width: 200px;
        margin: 0 auto;

        img {
            width: 100%;
        }
    }

    /*==================================*/
    /*=====----- TEXT CONTENT -----=====*/
    /*==================================*/

    .contentRender_name_plugins_core_textbox {
        max-width: none;
        padding: 0;
        margin: 0;
        font-family: var(--font-body);
        font-weight: var(--font-weight-medium);
        font-size: var(--text-sm);
        line-height: var(--leading-normal);
        color: inherit;

        p,
        ul,
        ol,
        li,
        a {
            font: inherit;
            color: inherit;
        }

        p {
            margin-bottom: 1.375rem;
        }

        a {
            text-decoration-color: transparent;
        }
    }

    /*===================================*/
    /*=====----- BOTTOM IMAGES -----=====*/
    /*===================================*/

    .images-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1px;
        opacity: 0.9;
    }

    .footer-image {
        height: 170px;
        mask: url('footer-image-mask.svg') repeat-x center top;

        &:last-child {
            grid-column: span 2;
            height: 158px;
            mask-position: center bottom;
        }

        .slide-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }


    /*==================================*/
    /*=====----- ATTRIBUTIONS -----=====*/
    /*==================================*/

    .footer-bottom {
        padding: 34px var(--space-5) 27px;
    }

    .logos-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 27px;
    }

    .external-logo {
        display: block;
        text-decoration: none;
    }

    .made-by-sv {
        display: block;
        width: 100%;
        max-width: 230px;
        flex-shrink: 0;
        text-decoration: none;
    }

    .copyright {
        margin: 0;
        font-family: var(--font-body);
        font-weight: var(--font-weight-medium);
        font-size: var(--text-sm);
        line-height: var(--leading-normal);
        color: inherit;
    }

    /*===================================*/
    /*=====----- MEDIA QUERIES -----=====*/
    /*===================================*/

    @media (hover: hover) {
        .contentRender_name_plugins_core_textbox a:hover {
            text-decoration-color: currentColor;
        }
    }

    @media (min-width: 40em) {
        .images-row {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .footer-image {
            &,
            &:last-child {
                mask-position: center top;
                height: 200px;
            }

            &:last-child {
                grid-column: unset;
            }
        }
    }

    @media (min-width: 64em) {
        text-align: left;

        .footer-main-row {
            display: grid;
            grid-template-columns: 24ch max-content 24ch;
            justify-content: space-between;
            gap: var(--space-8);
            padding: var(--space-20) var(--space-5) 52px;
        }
        
        .content-col {
            order: -1;
        }

        .nav-col {
            justify-self: end;
            margin: 0;
        }

        .ctas {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .logo-footer {
            max-width: 286px;
        }

        .footer-bottom {
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            padding: 18px 52px;
        }

        .copyright {
            order: -1;
            font-size: var(--text-base);
        }

        .logos-row {
            justify-content: start;
            gap: var(--space-6);
        }

        .made-by-sv {
            width: auto;
            max-width: unset;
            flex-basis: 230px;
        }
    }
}