container[name="footer__container"]{
    container: footer / inline-size;
}

footer{
    background: var(--_color-white);
    padding-inline: 24px;
    padding-block: 48px 12px;
    display: flex;
    flex-flow: column wrap;
    gap: 32px;

    > header{
        display: flex;
        flex-flow: column wrap;
        gap: 8px;

        > p{
            color: var(--_color-black);
        }

        > .footer__header__content{
            padding-block: 12px 0;
            display: flex;
            flex-flow: row wrap;
            gap: 16px;

            > a{
                padding-inline: 1.5ch;
                aspect-ratio: 1 / 1;
                border-radius: 50%;
                background: var(--_color-gray-2);
                display: flex;
                align-items: center;
                transition: all .3 ease;

                &:hover{
                    background: var(--_color-black);
                }
            }
        }
    }

    > .footer__content{
        display: flex;
        flex-flow: column wrap;
        gap: 24px;

        > nav{
            display: flex;
            flex-flow: column wrap;
            align-items: start;
            gap: 16px;

            > a{
                font-size: var(--_font-size-p);
                color: var(--_color-gray-1);
                text-decoration: none;
                transition: all .3s ease;

                &:not(.btn){
                    font-family: var(--_font-family-medium);
                }

                &:hover{
                    color: var(--_color-black);
                }
            }

            > p{
                font-size: var(--_font-size-p);
                font-family: var(--_font-family-medium);
                color: var(--_color-gray-1);

                > a{
                    color: var(--_color-black);
                    font-family: var(--_font-family-semibold);
                }
            }
        }
    }

    > .footer__footer{
        padding-block: 24px;
        border-top: 1.5px solid var(--_color-gray-2);
        display: flex;
        flex-flow: column wrap;
        align-items: center;
        gap: 8px;

        > p{
            color: var(--_color-black);
        }
    }
}

@container footer (min-width: 768px){
    footer{
        padding-inline: 96px;

        > header{
            max-inline-size: 264px;
        }
    }
}

@container footer (min-width: 1024px){
    footer{
        flex-flow: row wrap;
        justify-content: space-between;
        gap: 12px;

        > header{
            padding-block: 0;
        }

        > .footer__content{
            flex-flow: row wrap;

            > nav{
                inline-size: 216px;
            }
        }

        > .footer__footer{
            inline-size: 100%;
            flex-flow: row wrap;
            justify-content: space-between;
        }
    }
}

@container footer (min-width: 1280px){
    footer{
        padding-inline: 192px;
        padding-block: 96px 12px;
        gap: 40px;

        > header{
            max-inline-size: 300px;
        }

        > .footer__content{
            > nav{
                gap: 16px;
            }
        }
    }
}

@container footer (min-width: 1440px){
    footer{
        padding-inline: calc(50% - 1056px / 2);
    }
}