.ad-banner{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 200px;
    position: relative;
    object-fit: cover;
}

.ad-cover{
    width: 70%;
    height: 200px;
}


.banner-container{
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner-container .banner{
    background:linear-gradient(-55deg, #ff7675 29%, #d63031 29.1%, #d63031 68%, #ff7675 68.1%);
    border-radius: 5px;
    margin:10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    box-shadow: 0 5px 10px #0005;
    overflow: hidden;
}

.banner-container .banner .product{
    flex:1 1 250px;
    padding:15px;
    text-align: center;
}

.banner-container .banner .product img{
    width:80%;
}

.banner-container .banner .content{
    flex:1 1 250px;
    text-align: center;
    padding:10px;
    text-transform: uppercase;
}

.banner-container .banner .content span{
    color:#eee;
    font-size: 25px;
}

.banner-container .banner .content h3{
    color:#fff;
    font-size: 40px;
}

.banner-container .banner .content p{
    color:#eee;
    font-size: 20px;
    padding:10px 0;
}

.banner-container .banner .content .btn{
    display: block;
    height:40px;
    width:150px;
    line-height: 40px;
    background: #fff;
    color:#d63031;
    margin:5px auto;
    text-decoration: none;
}

.banner-container .banner .person{
    position: relative;
    bottom: -33px;
    padding:10px;
    flex:1 1 250px;
}

.banner-container .banner .person img{
    width:100%;
}

@media (max-width:768px){

    .ad-cover{
        width: 100%;
        height: 130px;
    }
}