/*
    FOOTER.CSS

    Description: This css file is intended for the styles of the footer.
    This can be used in all the pages that need the footer. This include
    all the containers, imagines, texts, links.
*/

.footer {
    display: flex;
    flex-direction: row;
    width: 80%;
    padding: 25px 0;
}

.footer__image-container {
    flex: 2;
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer__image {
    width: 50%;
    height: auto;
    object-fit: cover;
}

.footer__content {
    flex: 8;
    height: 100%;
}

.footer__list,
.footer__data,
.footer__contacts {
    display: flex;
    flex-direction: row;
    font-weight: 600;
    gap: 50px 25px;
}

.footer__list,
.footer__data {
    height: 50%;
}

.footer__list {
    padding-bottom: 40px;
}

.footer__data {
    justify-content: space-between;
    padding-top: 30px;
    border-top: 1px solid var(--color-primary);
}

.footer--black * {
    color: #000;
    font-weight: 400;
}

.footer__data--black {
    border-top: 1px solid #000;
}

.footer__data--white {
    border-top: 1px solid var(--color-white);
}

.footer__contacts {
    justify-content: space-between;
    font-size: 1.25em;
    letter-spacing: -1px;
    flex-grow: 3;
}

.footer__contacts:first-child {
    flex-grow: 1;
}

.footer__copyright {
    flex-grow: 1;
    text-align: right;
    letter-spacing: -1px;
    font-size: 1.1em;
}

.footer__list-item {
    display: flex;
    flex-direction: column;
    justify-content: start;
    gap: 10px;
}

.footer__list-item > a {
    text-decoration: none;
    font-size: 1.15em;
}

.footer__list-item a.footer__list-item--active {
    color: var(--color-primary);
}

/*
    Component: Social media

    Description: Styles for the social media images that are
    inside a footer.
*/

.social-media {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: start;
    gap: 10px;
    flex-grow: 2;
}

.social-media__img {
    width: 25px;
    height: 25px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.social-media__img:hover {
    transform: scale(1.5, 1.5);
    transition: transform 0.3s ease;
}

.footer__image--bottom {
    width: 100%;
    object-fit: cover;
    max-height: 150px;
    aspect-ratio: 195/29;
}

/*
    Section: Responsive

    Description: Media queries that change styles from
    the footer, including text, containers and images.
*/

@media (max-width: 1024px) {
    .footer {
        width: 100%;
        padding: 20px;
    }

    .footer__image {
        width: 80%;
    }

    .footer__list-item > a,
    .footer__contacts {
        font-size: 1em;
    }

    .footer__copyright {
        font-size: 0.9em;
    }

    .footer__data {
        gap: 0;
    }
}

@media (max-width: 992px) {
    .footer {
        gap: 20px;
    }
}

@media (max-width: 860px) {
    .footer__contacts {
        gap: 0px 10px;
    }

    .footer__list {
        padding-bottom: 20px;
    }
}

@media (max-width: 768px) {
    .footer__image {
        width: 124px;
        height: 124px;
    }

    .social-media__img {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 700px) {
    .footer__image-container {
        display: none;
    }
}

@media (max-width: 700px), (max-height: 768px) {
    .footer__list-item > a,
    .footer__contacts {
        font-size: 0.8em;
    }

    .footer__copyright {
        font-size: 0.7em;
    }
}

@media (max-width: 480px) {
    .footer__contacts {
        position: relative;
        margin-right: 15px;
    }
}

@media (max-width: 490px) {
    .footer__list {
        gap: 10px;
        justify-content: space-between;
    }
}

@media (max-width: 420px) {
    .social-media__img {
        width: 15px;
        height: 15px;
    }
}

@media (max-width: 340px) {
    .social-media__img {
        width: 12.5px;
        height: 12.5px;
    }
}