/* ---------Max Widths -----*/
@media screen and (max-width: 1100px){
    .container{
        margin: 40px;
    }
}

@media screen and (max-width: 900px) {
    .tile {
        width: 500px;
        margin: 10px;
    }
}


@media screen and (max-width: 800px){
    .tile {
        width: 400px;
        height:60px;

    }
}
@media (max-width: 600px){
    .tile {
        width: 350px;
        height:60px;

    }
}



@media screen and (max-width: 400px) {
    .container {
        margin: 18px;
    }
    .image-container{
        height: 70px;
        width: 70px;
    }
    .tile {
        width: 260px;
        height: 40px;
        margin: 4px;
    }

    .tile p{
        margin-top: 10px;
    
    }

    .tile-share-button {
        margin: 3px;
        width: 30px;
        height: 30px;
    }

    .tile-share-button i {
        margin-left: 8px;
        margin-top: 8px;

    }

    .icon {
        margin: 8px 8px;
        width: 30px;
        height: 30px;
    }

    .icon i {
        font-size: 20px;
        width: 20px;
        height: 20px;
    }

}

@media screen and (max-width: 320px){
    .tile p{
        margin-top: 9px;
        font-weight: 500;
        letter-spacing: 2px;
    
    }

    .tile-share-button i {
        margin-left: 7px;
        margin-top: 7px;
    }

}


/* --------- LANDSCAPE ------- */
@media screen and (orientation: landscape) and (max-height: 900px){
    .container{
        margin: 40px;
    }

}
@media screen and (orientation: landscape) and (max-height: 800px){
    .container {
        margin: 20px;
    }

}

@media screen and (orientation: landscape) and (max-height: 620px){
    .container{
        flex-direction: row;
    }

    .tile {
        width: 300px;
        height: auto;
    }

}



@media screen and (orientation: landscape) and (max-height: 500px){
    .container {
        margin: 10px;
    }

    .icon {
        width: 25px;
        height: 25px;
    }

    .icon i {
        margin: 2px;
        font-size: 25px;
    }
    

    .tile {
        width: 300px;
        height: 50px;
        margin: 10px;
    }

    .tile-share-button {
        width: 30px;
        height: 30px;
    }

    .tile-share-button i {
        margin-left: 6px;
        margin-top: 8px;
    }

}

@media screen and (orientation: landscape) and (max-height: 400px){
    h1 {
        font-size: 17px;
    }
    .image-container {
        height: 87px;
        width: 87px;
    }
    .container {
        margin: 0px;
        height: 100%;
    }
    .tile {
        width: 250px;
        height: 40px;
        margin: 8px;
    }

    .tile-share-button{
        width: 25px;
        height: 25px;
    }

    .tile-share-button i{
        margin-left: 3px;
        margin-top: 4px;
    }

    .icon i {
        width: 25px;
        height: 25px;
    }

}

/* For the landscape dimensions of Iphone SE and Iphone 6/7/8 */
@media screen and (width: 667px) and (height: 375px){
    .container {
        margin-top: 20px;
    }
}