@import 'flex.scss';

.responsive {
    position: relative;
    ul {
        @include p-base;
        margin-left: 1rem;
    }
    &.flexbody{
        .flexample {
            img {
                width: fit-content;
            }
            &.responsive {
                width: 50%;

                @media (max-width: 1480px) {
                    width: 60%;
                }
                @media (max-width: 1280px){
                    width: 80%;
                }
                @media (max-width: 960px) {
                    width: 100%;
                }

                .flexbox {
                    overflow-x: auto; 
                    border: 1px dashed #333;

                    @media (max-width: 960px) {
                        display: flex;
                        > div {flex: 0 1 auto;} 
                    }
                    @media (max-width: 780px) {
                        flex-flow: row wrap;
                    }
                    @media (max-width: 480px) {
                        display: block;
                    }
                    
                }
            }
        }
        p {
            @include p-base;
        }
        img {
            max-width: 33vw;
            margin: $padding-div;
            @media (max-width: 1080px) {
                max-width: 100%;
            }
        }
        a {
            @include links(inherit, 700);
        }
        .btn {
            &.download {
                text-decoration: none;
                color: white;
                background: #6b4b79;
                background: linear-gradient(#6b4b79 0%, #BF3F57 100%);
                border: none;
                border-radius: 2em;
                padding: 1em;
                font-weight: 800;
                font-family: 'montserrat', sans-serif;
                text-transform: uppercase;
                margin: 1.5em 0;
                display: flex;
                &:hover {
                    background: linear-gradient(darken(#6b4b79, 20%) 0%, darken(#BF3F57, 20%) 100%);
                    transition: background .25s ease-in-out .01s;
                }
                &:focus {
                    outline: 1px solid #f0f0f0;
                }
            }
        }
        .flexample {
            width: fit-content;
        }
    }
}
