/* Slider for mobile layout */
    /* Daddy container */
    .slider {
    display: none;
    width: 100%;
    text-align: center;
    overflow: hidden;
    }
        /* Slides conteiner */
        .slides {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        }
        /* webkit stuff, only some browsers */
        .slides::-webkit-scrollbar {
        width: 10px;
        height: 10px;
        }
        .slides::-webkit-scrollbar-thumb {
        background: black;
        border-radius: 10px;
        }
        .slides::-webkit-scrollbar-track {
        background: transparent;
        }
            /* The actual slides */
            .slides > div {
            scroll-snap-align: start;
            flex-shrink: 0;
            width: 100%;
            border-radius: 10px;
            background: #eee;
            transform-origin: center center;
            transform: scale(1);
            transition: transform 0.5s;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            }
            /* The 'buttons' for navigation */
            .slider > a {
            display: inline-flex;
            width: 1.5rem;
            height: 1.5rem;
            background: grey;
            text-decoration: none;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            margin: 10px;
            position: relative;
            }
            .slider > a:active {
            top: 1px;
            }
            .slider > a:focus {
            background: #000;
            }
    /* if snap-type is supported we dont need the 'buttons' */
    @supports (scroll-snap-type) {
        .slider > a {
            display: none;
        }
    }
    /* Hide main layout and show mobile layout when portwidth less than 400px */
    @media (max-width: 400px) {
        .slider {
            display: block;
        }
        #recent-posts {
            display: none;
        }
    }