/******************************************
/* Min-width
/* Bootstrap primarily uses the following media query ranges—or breakpoints—in
/* our source Sass files for our layout, grid system, and components.
*******************************************/

/* X-Small devices (portrait phones, less than 576px) */
/* No media query for `xs` since this is the default in Bootstrap*/


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .products-list .product-item .pi-border{
        border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important;
    }
    .article-descriptions img{
        max-width: 450px;
        max-height: 450px;
    }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .st-masthead h1 {
        font-size: 4rem
    }
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
    .bs-display-5 {
        font-size: 3rem;
    }
}

/******************************************
/* Max-width
/* We occasionally use media queries that go in the other direction (the given
/* screen size or smaller):
*******************************************/

/* X-Small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    .article-descriptions .pos-top,
    .article-descriptions .pos-left,
    .article-descriptions .pos-bottom,
    .article-descriptions .pos-right{
        display: flex;
        flex-direction: column;
    }
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
}

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
}

/* X-Large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {
}

/* XX-Large devices (larger desktops) */
/* No media query since the xxl breakpoint has no upper bound on its width */