/**** footer ****/
footer {
    /* variables */
    --padding: 10px;
    --gap: 10px;
}

footer * {
    margin: 0;
}

footer .container {
    /* sizing */
    padding: calc(var(--padding) * 2) min(calc(var(--padding) * 4), max(4vw, var(--padding)));

    /* grid */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(282px, 100%), 1fr));
    gap: var(--gap);

    /* stling */
    background-color: var(--secondary-color);
    color: var(--primary-text-color);

    /* transition*/
    transition: background-color var(--transition-duration) var(--transition-method), color var(--transition-duration) var(--transition-method);
}

footer .column {
    /* sizing */
    width: min(282px, 100%);

    /* flex */
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) / 2);
}

footer .divider {
    /* sizing */
    height: 2px;
    flex-shrink: 0;

    /* styling */
    color: inherit;
    background-color: currentColor;
}

footer p {
    white-space: pre-line;
}

footer ul {
    /* sizing */
    padding: 0;
    margin: 0;
    width: 100%;

    /* flex */
    display: flex;
    flex-direction: column;
    gap: var(--gap);

    /* list */
    list-style: none;
}

footer a {
    /* sizing */
    width: 100%;
    min-height: 40px;
    padding: 10px 20px;

    /* flex */
    display: flex;
    justify-content: center;
    align-items: center;

    /* styling */
    border-radius: var(--footer-radius);
    background-color: var(--brand-color-background);
    outline: none;
    fill: currentColor;

    /* text */
    text-decoration: none;
    text-align: center;
    color: var(--brand-text-color);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;

    /* transistion */
    transition: color var(--transition-button-duration) var(--transition-button-method);
}

footer a:hover,
footer a:focus,
footer a:focus-visible,
footer a.social:hover,
footer a.social:focus,
footer a.social:focus-visible {
    outline: none;
    color: var(--brand-text-color);
    background-color: var(--brand-color-foreground) !important;
}

footer a.social svg {
    fill: inherit !important;
}

footer a:active,
footer a.social:active {
    outline: none;
    color: var(--brand-color-background) !important;
    background-color: var(--brand-text-color) !important;
}