/*
This file describes styles that are 768px width and smaller
 */
@media all and (max-width: 768px) {
    :root {
        --section-distance: 45px
    }
    h1 {
        font-size: 2.9rem
    }
    h3 {
        font-size: 2rem
    }
    .product__item h3{
        margin-top: var(--size-1)
    }
    body{
        font-size: 1.4rem
    }
    .grid-2, .grid-3, .grid-5{
        grid-template-columns: 1fr
    }
    section ul:not(:first-child) {
        margin-top: var(--size-1)
    }
    ul li:not(nav ul li):before{
        width: 6px;
        height: 6px;
        top: 7px
    }
    ul li:not(nav ul li){
        padding-left: 17px
    }
    .header {
        padding: var(--size-1) 0
    }
    section p:not(:first-child), blockquote:not(:first-child) {
        margin-top: var(--size-1)
    }
    .about-content{
        flex-direction: column;
        gap: var(--size-2)
    }
    .about-content .media{
        min-width: 100%
    }
    .about .gallery .img-container{
        height: 220px
    }
    
    .slider-nav{
        gap: var(--size-1);
        left: calc(50% - 44px);
        bottom: var(--size-1)
    }
    .slider-nav .prev, .slider-nav .next{
        background-size: 8px
    }
    blockquote{
        padding: 8px 18px
    }
    blockquote p{
        font-size: 11px
    }
    .contact h3 {
        max-width: 230px
    }
    .contact .media img{
        height: 220px
    }
    footer {
        padding: var(--size-1) 0
    }
    .contact address{
        max-width: 190px
    }
   
}
@media all and (max-width: 600px){
  
   
}
@media all and (max-width: 480px){
   
   
}
@media all and (max-width: 400px){
   
  


}
@media all and (max-width: 360px){
    h1
    {
        font-size: 2.6rem
    }
   
}