/*
This file describes styles that are 991px width or smaller
 */
@media all and (max-width: 991px){
    h2 {
        font-size: 2.2rem;
        margin-bottom: var(--size-1)
    }
    .grid-2, .grid-3{
        grid-template-columns: 1fr;
        gap: var(--size-2)
    }
    .slider-nav .prev, .slider-nav .next{
        width: 38px;
        height: 38px;
        top: calc(50% - 19px)
    }
    .about-content{
        flex-direction: column
    }
    .contact .media img{
        position: static;
        width: auto;
        height: 280px;
        margin-bottom: -1px;
		margin-left: 20px
    }
    .contact .content{
        border: none;
        border-radius: 0;
        display: flex;
        flex-direction: column
    }
    .contact .content .text{
        border: 3px solid var(--primary-color);
        border-radius: var(--size-2);
        padding-left: var(--size-1);
        padding-top: var(--size-2);
        padding-bottom: var(--size-2)
    }
    .contact .media{
        display: flex
    }
    .contact h3 {
        max-width: 100%
    }
    .contact address {
        margin-top: var(--size-1)
    }
    address a.email:before{
        width: 18px;
        height: 14px;
        top: 4px
    }
    address a.tel:before{
        width: 16px;
        height: 16px;
        top: 3px
    }
    address a.location:before{
        width: 13px;
        height: 17px;
        top: 1px
    }
    address a{
        padding-left: 26px
    }
    .contact a.credits{
        bottom: 8px
    }
  
   
}