@media only screen and (max-width: 992px) 
{
    section.container 
    {
        padding: 1rem;
        gap: 1rem;
        margin-bottom: 5rem;
    }

	section.gallery > img 
    {
        width: 15rem;
        height: 15rem;
    }
}

@media only screen and (max-width: 768px) 
{
    header > nav
    {
        width: 100%;
        flex-direction: column;
    }
	header label.menu 
    {
        display: flex;
    }

    header nav.dropdown-menu
    {
        display: none;
        flex-direction: column;
        align-items: center;
    }

    header label:has(:checked) ~ nav.dropdown-menu
    {
        display: flex;
    }

    main > section.landing > img 
    {
        height: 30rem;
    }
    
    section.container 
    {
        padding: 0;
        margin-bottom: 5rem;
    }

    div.card 
    {
        width: 85%;
    }

    div.card > img 
    {
        width: 100%;
    }

    div.card > h3
    {
        text-align: center
    }

    section.gallery 
    {
        padding: 0;
        padding-top: 5rem;
        padding-bottom: 5rem;
        gap: 0.5rem;
    }

    section.gallery > img 
    {
        width: 13rem;
        height: 13rem;
    }

    .showcase > div > img 
    {
        max-width: 93%;
    }

    .showcase svg 
    {
        width: 2rem;
        height: 2rem;
    }

    .showcase > button#close 
    {
        top: -1rem;
        right: -1rem;
    }

    button#prev
    {
        position: absolute;
        right: -1rem;
    }

    button#next
    {
        position: absolute;
        left: -1rem;
    }

    footer 
    {
        gap: 2.7rem;
        padding: 1rem;
    }

    footer > nav 
    {
        flex-direction: column;
        gap: 2.3rem;
    }

    footer > nav > div
    {
        flex-wrap: wrap;
        gap: 1.9rem;
        justify-content: center;
    }

    footer > nav.socails 
    {
        flex-direction: row;
        justify-content: space-evenly;
        gap: 1.5rem;
    }

}

@media only screen and (max-width: 600px) 
{
    main > section.landing > img 
    {
        height: 20rem;
    }

	main > section.info-card > section.info > img 
    {
        width: 100%;
    }

    section.gallery > img 
    {
        width: 7rem;
        height: 7rem;
    }
}