/**
 * Style definition of the footer section
 */
footer {
    @apply bg-cover bg-no-repeat py-20 text-[var(--color-background)] text-base leading-6;
    background-image: url('../images/footer.png');
}

footer h3 {
    @apply text-2xl font-normal mb-5 leading-6;
    font-family: 'Vinacles', sans-serif;
}

footer > ul {
    @apply max-w-[1140px] list-none mx-auto p-0 grid gap-x-10;
    grid-template-columns: 1fr repeat(3, 225px);
}

footer > ul > li:first-of-type {
    @apply pr-4;
}

footer > ul > li.logo img {
    @apply mb-4;
    width: 255px;
    height: 59px;
}

footer > ul > li:last-of-type {
    grid-column: 1 / 5;
}

footer > ul > li:last-of-type > ul {
    @apply list-none mx-auto p-0 grid gap-x-8;
    grid-template-columns: 1fr repeat(4, max-content);
}

/* Lists inside footer */
ul.list {
    @apply list-none grid grid-cols-1 gap-y-0.5 p-0 m-0;
}

ul.list.larger > li {
    @apply mb-4;
}

/* Social icons */
div.socials {
    @apply mt-4;
}

div.socials img {
    @apply w-[15px] h-[15px];
}

/* Media queries */

/* Large screens */
@media (min-width: 1001px) {
    footer strong {
        @apply -mt-6 block;
    }
}

/* Smaller screens */
@media (max-width: 1000px) {
    footer {
        @apply p-8;
    }

    footer > ul {
        @apply max-w-[540px] grid grid-cols-1 grid-rows-[repeat(4,max-content)] gap-y-4;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, max-content);
    }

    footer > ul > li:first-of-type {
        padding-right: initial;
    }

    footer > ul > li:last-of-type {
        padding-top: initial;
        grid-column: 1 / 2;
    }

    footer > ul > li:last-of-type > ul {
        @apply grid grid-cols-1;
        grid-template-columns: 1fr;
    }

    ul.list {
        @apply grid grid-cols-1 gap-y-0.5;
    }

    ul.list.larger > li {
        @apply mb-4;
    }
}