@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Manrope:wght@200..800&family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');body{margin:0;padding:0;box-sizing:content-box;font-family:"Roboto",sans-serif}
.container--blogmaincontainer{width:80%;margin:0 auto;@media screen and (max-width:650px){width:90%}
}
.bupperteasercontainer{display:flex;gap:20px;padding:10px;box-shadow:0 0 17px 0 #00000040;border-radius:14px;@media screen and (max-width:650px){flex-direction:column;padding:0;gap:10px;box-shadow:unset}
.img-container{width:50%;@media screen and (max-width:650px){width:100%}
>img{width:100%}
}
.content-container{width:50%;display:flex;flex-direction:column;justify-content:space-between;@media screen and (max-width:650px){width:auto;padding:0 15px;padding-bottom:15px}
.description{display:flex;flex-direction:column;gap:10px;.genre-container{display:flex;gap:10px;font-size:10px;font-weight:400;color:#000;.genre{padding:5px 12px;background:#ebebeb;border-radius:5px}
.inspiration{padding:5px 12px;background:#ffbba3;border-radius:5px}
.date{padding:5px 12px;color:#979797}
}
.desc-container{display:flex;flex-direction:column;gap:10px;.italic-bold{font-weight:500;font-size:14px;font-style:italic;color:#f15b27}
.italic{font-weight:400;color:#f15b27;font-style:400}
.italid-with-border{color:#f15b27;font-style:italic;padding-left:16px;border-left:1px solid #f15b27}
.desc-title,h1{font-size:28px;font-weight:600;margin:0}
.desc,p{font-size:14px;font-weight:400;color:#979797;margin:0}
}
}
.read-article-btn{display:flex;gap:10px;align-items:center;>p{font-size:12px;font-weight:400;border-bottom:1px solid #c7c7c7}
>img{padding:8px;border:1px solid #c7c7c7;border-radius:6px;cursor:pointer}
}
}
}
.blogsupperteaser{margin-bottom:34px;h3{font-size:18px;font-weight:500;padding-bottom:12px;border-bottom:1px solid rgba(0,0,0,0.1);margin:20px 0}
}
.bcardsgridcontainer{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;@media screen and (max-width:650px){grid-template-columns:repeat(1,1fr)}
.bupperteasercontainer{flex-direction:column;padding:0;gap:10px;@media screen and (max-width:650px){box-shadow:0 0 17px 0 #00000040}
.img-container{width:100%}
.content-container{width:auto;padding:0 15px;padding-bottom:15px}
}
}
.blog-page-breadcrum{a{color:rgba(0,0,0,1);font-size:12px;font-weight:300;text-decoration:none}
.cmp-breadcrumb{width:100%}
.cmp-breadcrumb__list{margin:0;padding:0;margin:0;padding:0;margin-top:45px;font-size:12px;font-weight:300;color:rgba(0,0,0,1);display:flex;gap:16px;padding-bottom:12px;border-bottom:1px solid rgba(0,0,0,0.1);.cmp-breadcrumb__item{position:relative;&::after{content:"";background-image:url("../../../content/dam/dishtv-aem-web-platform/blogs/arrow.png");background-position:center;background-repeat:no-repeat;position:absolute;right:-15px;top:50%;display:block;width:10px;height:10px;transform:translateY(-50%)}
&:last-child::after{display:none}
}
}
}
.articlepage{.article-blog-page{display:flex;gap:50px;margin-bottom:150px;@media screen and (max-width:650px){flex-direction:column;gap:20px;margin-bottom:20px}
.left-container{padding-right:50px;width:70%;border-right:1px solid rgba(199,199,199,0.5);margin-top:20px;@media screen and (max-width:650px){width:100%;padding-right:unset;border:0}
.bupperteasercontainer{flex-direction:column;box-shadow:unset;.img-container{width:100%}
.content-container{width:100%;@media screen and (max-width:650px){padding:0}
}
}
}
.right-container{width:30%;display:flex;flex-direction:column;gap:20px;margin-top:20px;@media screen and (max-width:650px){width:100%}
p{font-size:18px;font-weight:500;color:#000;padding-left:10px;border-left:2px solid #d3d3d3;margin:unset}
.searchbar-container{display:flex;flex-direction:column;gap:25px;padding-bottom:20px;border-bottom:1px dashed #d3d3d3;input{border:1px solid #d3d3d3;height:41px;border-radius:9px;font-size:16px;padding:0 10px}
}
.recent-post-container{display:flex;flex-direction:column;gap:25px;.recent-blog-container{display:flex;flex-direction:column;gap:20px;.recent-blog-teaser{display:flex;gap:16px;padding-bottom:10px;border-bottom:1px dashed #d3d3d3;.img-container{img{height:68px;width:68px;border-radius:6px}
}
.content-container{display:flex;flex-direction:column;justify-content:space-around;.blog-title{font-size:14px;font-weight:600;color:#000;width:80%}
.blog-date{font-size:10px;font-weight:400;color:#979797}
}
}
}
}
}
}
}