.tc-footer {
    background: var(--color-black);
    padding: 40px 0;
}

.tc-footer__inner {
    display: flex;
    flex-flow: column;
    gap: 40px;
    justify-content: flex-start;
    align-items: flex-start;
}

.tc-footer__brand {
    display: inline-block;
    margin-bottom: 12px;
}

.tc-footer__brand img {
    max-width: 140px;
}

.tc-footer__text p {
    font: 400 16px/1.2 var(--font-body);
    color: var(--color-bronze);
    max-width: 70%;
}

.tc-footer__nav .menu {
    list-style-type: none;
    padding: 0;
    display: flex;
    flex-flow: column;
    gap: 8px;
}

.tc-footer__nav a {
    text-decoration: none;
    font: 400 16px/1.2 var(--font-body);
    color: var(--color-bronze);
}

.tc-footer__fourth-column h3,
.tc-footer__second-column h3,
.tc-footer__third-column h3 {
    font: 700 20px/1.2 var(--font-primary);
    color: var(--color-bronze);
    text-decoration: underline;
    margin-bottom: 20px;
}

.tc-footer__socials {
    list-style-type: none;
    padding: 0;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
}

.tc-footer__socials li {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
}

.tc-footer__socials img {
    max-width: 28px;
    max-height: 28px;
    object-fit: contain;
}

.tc-footer__fourth-column ul {
    list-style-type: none;
    padding: 0;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 12px;
}

.tc-footer__fourth-column a {
    display: flex;
    flex-flow: row;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font: 400 16px/1.2 var(--font-body);
    color: var(--color-bronze);
}

.tc-footer__copy {
    border-top: 1px solid var(--color-bronze);
    padding-top: 12px;
    text-align: center;
    margin-top: 20px;
}

.tc-footer__rights {
    font: 400 14px/1.2 var(--font-body);
    color: var(--color-bronze);
}

@media only screen and (min-width: 1024px) {
    .tc-footer {
        padding: 80px 0 40px;
    }

    .tc-footer__inner {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 40px;
    }
}