@media (max-width: 1440px) {
    section#content-information {
       padding: calc(var(--size-1) * 1.5); 
    }

    #category-content {
        gap: var(--space-3);
        padding: calc(var(--size-1) * 1.5); 
    }

    #category-filter {
        gap: var(--space-3);
        padding: var(--space-3);
    }

    .card-item.small {
        width: var(--size-third);
        min-width: var(--size-third);
    }
}

@media (max-width: 1024px) {
    html {
        font-size: 14px !important;
    }

    article {
        padding: var(--space-6) !important;
    }
    
    .article-section-container {
        padding: var(--space-4) !important;
    }

    .card-item, .card-item.small {
        min-width: var(--size-third) !important;
    }

    .card-item.big .card-image {
        min-height: var(--size-8) !important;
    }

    #lot-content {
        height: var(--size-fit);
        flex-wrap: wrap;
    }

    #lot-general-content {
        flex-direction: column;
        height: var(--size-fit);
    }

    #lot-gallery, #lot-information {
        width: var(--size-full);
        min-width: var(--size-full);
        max-width: var(--size-full);
    }

    #lot-gallery {
        flex-direction: column-reverse;
    }

    #lot-image-list {
        min-width: var(--size-full);
        flex-direction: row;
    }

    .lot-image-item {
        min-width: var(--size-3);
    }

    #category-container {
        flex-direction: column;
    }

    .category-filter-list {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .card-item, .card-item.small {
        min-width: var(--size-half) !important;
    }

    section#content-information {
       padding: var(--size-2)
    }

    #category-content {
        padding: var(--size-2)
    }

    #category-filter {
        padding: var(--space-5);
    }

    #category-filter-form {
        font-size: var(--font-size-4);
        gap: var(--space-5);
    }

    #category-filter-form .accordion-switcher[data-accordion-switcher-type="button"] {
       padding: calc(var(--space-2) / 1.5);
    }
}

@media (max-width: 425px) {
    html {
        font-size: 10px !important;
    }

    article {
        padding: var(--space-6) var(--space-2) !important;
    }

    .article-section-container {
        padding: var(--space-4) !important;
    }

    .card-item, .card-item.small {
        min-width: var(--size-full) !important;
    }

    .card-item.big .card-image {
        min-height: var(--size-7) !important;
    }

    .carousel {
        height: 80vh !important;
    }
}