footer {padding-top: 60px; background-color: var(--_c-gray-lt);}
footer .logo {margin-bottom: 60px;}
footer .logo a {margin-inline: auto;}
footer .wrapper {display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px; margin-bottom: 42px;}
footer .wrapper div > :first-child {font-size: var(--fs-sm, 20px); color: var(--c-primary); margin-bottom: 10px;}
footer .content p {text-transform: capitalize;}
footer .links li:not(:last-of-type) {margin-bottom: 8px;}
footer .links a {position: relative; font-weight: 600;}
footer .links a:hover {color: var(--c-primary);}
footer .links a::before {position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background-color: var(--c-primary); border-radius: 5px; transition: width var(--transition); content: '';}
footer .links a:hover::before {width: 80%;}
footer .newsletter {max-width: 305px;}
footer .newsletter input {width: 100%; background-color: var(--_c-gray-md); padding: 7px 18px; border-radius: 6px; margin-block: 6px 12px;}
footer .newsletter input::placeholder {color: var(--_c-gray-drk);}
footer .social ul {display: flex; align-items: center; flex-wrap: wrap; gap: 10px;}
footer .social li a {display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 2px solid #000; border-radius: 50%; transition: var(--transition);}
footer .social li a:hover {background-color: var(--c-primary); border-color: var(--c-primary);}
footer .social li a img {filter: brightness(0);}
footer .social li a:hover img {filter: brightness(50);}
footer .payments {text-align: center; margin-bottom: 60px;}
footer .copyright {text-align: center; background-color: var(--c-primary); padding: 20px;}
footer .copyright p {font-family: var(--ff-primary); font-size: calc(var(--fs-base, 16px) + 2px); font-weight: 600; color: #fff;}
footer .copyright p::selection {background-color: #fff; color: var(--c-primary);}

@media only screen and (max-width: 1200px) {
    footer .wrapper {grid-template-columns: auto repeat(2, 1fr) auto; gap: 36px;}
    footer .content {max-width: 305px;}
    footer .elements {max-width: 200px;}
}

@media only screen and (max-width: 991px) {
    footer {padding-top: 50px;}
    footer .logo {margin-bottom: 50px;}
    footer .logo img {max-width: 270px;}
    footer .wrapper {grid-template-columns: repeat(2, 1fr); gap: 32px;}
    footer .content {max-width: 100%;}
    footer .elements {max-width: 100%;}
    footer .payments {margin-bottom: 50px;}
}

@media only screen and (max-width: 575px) {
    footer {padding-top: 40px;}
    footer .logo {margin-bottom: 40px;}
    footer .logo img {max-width: 230px;}
    footer .wrapper {grid-template-columns: 1fr; gap: 20px; margin-bottom: 32px;}
    footer .links li:not(:last-of-type) {margin-bottom: 12px;}
    footer .payments {margin-bottom: 40px;}
}

@media only screen and (max-width: 475px) {
    footer .logo img {max-width: 200px;}
    footer .wrapper {gap: 15px; margin-bottom: 20px;}
    footer .wrapper div > :first-child {margin-bottom: 8px;}
}