main {
    width: 100%;
}

form {
    background-color: var(--form-blue);
    border-radius: 1em;
    margin: 1em;
    padding: 1em;
    box-shadow: 4px 4px 8px rgba(0,0,0,0.3);
}

form legend {
    font-size: 1.5em;
}

form p {
    margin-left: 0.25em;
}

form label {
    margin-left: 1em;
}

main h1 {
    text-align: center;
    padding: 0.25em;
}

main p.empty {
    padding: 1em;
}

main p.empty.hide {
    display: none;
}

section.items {
    padding: 1em;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1em;
}

section.items article {
    background: var(--primary-white);
    border-radius: 12px;
    box-shadow: 4px 4px 8px rgba(0,0,0,0.3);
    padding: 1em;
}

section.items article h2 {
    font-size: 1.5em;
    text-align: center;
}

section.items article p {
    text-align: center;
}

section.items article img {
    display: none;
}

section.items article.new {
    background-color: var(--status-green);
}

section.items article.used {
    background-color: var(--status-orange);
}

section.items article.damaged {
    background-color: var(--status-red);
}

.delete-btn {
    margin-top: 0.5em;
    padding: 0.5em;
    border: none;
    background: red;
    color: white;
    border-radius: 8px;
    cursor: pointer;
}

.delete-btn:hover {
    background: darkred;
}

ul.statistics {
    list-style-type: none;
    padding: 1em;
}

@media (min-width: 400px) {
    section.items article {
        display: flex;
    }
    section.items article div {
        width: 50%;
    }
    section.items article div .brand {
        display: none;
    }
    section.items article img {
        display: block;
        object-fit: contain;
        max-width: 50%;
    }
}

@media (min-width: 800px) {
    main {
        width: 800px;
        align-self: center;
    }

    section.items {
        grid-template-columns: 1fr 1fr;
    }
    
    form {
        width: 800px;
        align-self: center;
    }
}