/* ---------- MEDIA QUERIES ---------- */


@media (max-width: 645px) {

    main {
        padding: 25px;
    }

    .filters-header {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;

        gap: 15px var(--half-margin);
        align-items: start;

        text-align: center;
        justify-content: space-between;
    }

    .filter-bar {
        margin-top: 75px;
    }

    .filter-item.toggle-options {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .filter-item.tipologia {
        grid-column: 1;
        grid-row: 2;

        justify-content: flex-start;
        text-align: left;
    }

    .filter-item.color {
        grid-column: 2;
        grid-row: 2;

        justify-content: flex-end;
        text-align: right;
    }

    .stones-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--margin);
    }

    .stones-grid img {
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        display: block;
    }

    .stone:nth-child(2n) {
        margin-left: 0;
    }

    .stone.small img,
    .stone.medium img,
    .stone.large img,
    .stone.square img {
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        display: block;
    }

}