.offduty-blog-menu-container{
display:flex;
justify-content: space-between;
transition: all 0.3s;
}
.offduty-blog-menu-container a{
color: black;
}
.offduty-article-title{
font-family: "Barlow";
font-size:15px;
font-weight: 600;
margin:0;
}
.offduty-article0{
width:40%
}
.offduty-article1, .offduty-article2{
width:27%;
}
.offduty-article-img {
width: 100%;
height: 502px;
overflow: hidden;
}
.offduty-article-img div{
width:100%;
height:100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: all .4s;
}
.offduty-article-img div:hover, .offduty-article-img div:focus{
transform: scale(1.2);
filter: grayscale(0.60);
}
.offduty-article-date{
font-family: "Barlow";
font-size:12px;
font-weight: 400;
}
.offduty-article-excerpt{
font-family: "Barlow";
font-size:15px;
font-weight: 400;
}
#beach-club-pagination{
display:none;
margin-top:30px
}
#beach-club-pagination li{
width: 13px !important;
height: 13px;
border: 1px solid #000;
border-radius: 50%;
margin: 0 16px;
}
#beach-club-pagination li.active{
background-color:black;
}
@media(max-width:767px){
.offduty-blog-menu-container{
width:300%
}
.offduty-article0,.offduty-article1,.offduty-article2{
width:27%;
margin: 0 auto;
}
#beach-club-pagination{
margin-bottom:80px;
display:block;
width: 100% !important;
padding: 0;
justify-content: center;
display: flex;
}
.offduty-article-img{
height:389px;
}
} #offduty-blog{
padding:0;
}
#offduty-blog li{
display: flex;
justify-content: space-between;
margin: 60px 0px;
}
#offduty-blog .row3{
flex-direction: row-reverse;
}
#offduty-blog li > div:first-child{
width:412px;
}
#offduty-blog li > div{
width:328px;
}
#offduty-blog li > div a div{
width:100%;
height:502px;
}
#offduty-blog li > div img{
width:100%;
height:100%;
object-fit: cover;
}
@media(max-width:767px){
#offduty-blog li{
margin:0;
}
#offduty-blog .row1{
margin-top:40px;
}
#offduty-blog li,#offduty-blog .row3{
flex-direction: column;
}
#offduty-blog li > div{
margin-bottom:40px;
}
#offduty-blog li > div:first-child, #offduty-blog li > div{
width:100%;
padding: 0 5%;
}
#offduty-blog li > div a div{
height: 389px;
}
}