/* Import
@import "../common-styles.css";
*/


/* Front
*/
.inline-banner {
    display:flex;
    max-width:300px;
    margin: 30px auto;
}
.inline-banner a.wrapper {
    display:flex;
    flex-direction:column;
    box-sizing: border-box;
    width:100%;
    height:100%;
    margin: 0;
    border:1px solid #FFFFFF;
    transition: all 0.5s ease;
}
.inline-banner a.wrapper:hover {
    border:1px solid #333333;
    text-decoration:none;
}
.inline-banner a.wrapper .thumb {
    display:flex;
    flex: 2;
    min-width:200px;
    min-height: 250px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.inline-banner a.wrapper .info {
    display:flex;
    flex-direction:column;
    margin:0;
    padding:20px 20px;
    justify-content:center;
    text-align:center;
}
.inline-banner a.wrapper .info h2 {
    margin-top:0;
    margin-bottom:10px;
    padding-bottom:0;
    line-height: 1.8rem;
    font-weight: 600;
    border:none;
}
.inline-banner a.wrapper .info p {
    margin:0;
    line-height: 1.5rem;
    font-weight: 500;
}

@media screen and (min-width: 480px) {

    .inline-banner {
        max-width:350px;
    }
}

@media screen and (min-width: 992px) {

    .inline-banner {
        max-width:100%;
    }
    .inline-banner a.wrapper {
        flex-direction:row;
    }
    .inline-banner a.wrapper .thumb {
        min-height: 150px;
    }
    .inline-banner a.wrapper .info {
        text-align:left;
    }
}

@media screen and (min-width: 1200px) {

    .inline-banner a.wrapper .info {
        padding:20px 50px;
    }
}


/* Editor
*/
.mb-block-preview .inline-banner {
    position:relative;
    border:1px dotted grey;
}
.mb-block-preview .inline-banner::before {
    content:"BANNER CTA";
    display:block;
    position:absolute;
    left:0;
    top:0;
    padding:2px;
    background:blue;
    color:#FFFFFF;
    font-size:10px;
    line-height:1em;
}
.mb-block-preview .inline-banner a {
    pointer-events: none;
}
.mb-block-preview .inline-banner a.wrapper {
    display:flex;
    flex-direction:row;
    box-sizing: border-box;
    width:100%;
    height:100%;
    margin: 0;
}
.mb-block-preview .inline-banner a.wrapper .thumb {
    display:flex;
    flex: 2;
    min-width:200px;
    min-height: 150px; 
}
.mb-block-preview .inline-banner a.wrapper .info {
    display:flex;
    flex-direction:column;
    padding:20px 50px;
    margin:0;
    justify-content:center;
    text-align:left;
}