.articles-2 {
}
.articles-2__content {
}
.articles-2__items {
}
.articles-2__item {
}
.articles-2-item {
}
.articles-2-item__image {
}
.articles-2-item__categories {
}
.articles-2-item__category {
}
.articles-2-item__title {
}
.articles-2-item__content {
}
.articles-2__foot {
display: flex; gap: 28px;
justify-content: space-between;
width: 100%;
}
.articles-2__socials {
}
.articles-2__social {
}
.articles__social-icon {
}
.articles__social-icon_facebook {
}
.articles__social-icon_twitter {
}
.articles-2__action {
background-color: #219df3;
display: flex;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
padding: 1.3em 1.5em;
font-size: 10px;
border-radius: 50px;
color: white;
font-weight: 600;
text-transform: uppercase;
margin-top: 14px;
min-width: 130px;
justify-content: center;
align-items: center;
text-align: center;
line-height: 1;
}
.articles-2__section-2 {
display: flex;
flex-direction: column;
gap: 42px;
}
.articles-2__section-2-title {
font-size: 18px;
}
.articles-2__related {
display: flex;
flex-direction: column;
gap: 24px;
}
.articles-2__related-item {
display: grid;
grid-template-columns: 25% 1fr;
grid-column-gap: 10px;
}
.articles-2__image {
width: 100%;
aspect-ratio: 1;
-o-object-fit: cover;
object-fit: cover;
}
.articles-2__title {
font-size: 16px;
max-height: 3em;
overflow: hidden;
line-height: 1.6;
align-self: center;
color: #252525;
}
.page-projects__projects {
}
.articles-2 {
}
.articles-2__content {
display: grid;
flex-direction: column;
gap: 80px;
grid-template-columns: 70% 1fr;
}
.articles-2__items {
display: grid;
grid-row-gap: 84px;
}
.articles-2__item {
}
.articles-2-item {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
gap: 15px;
}
.articles-2-item__image {
margin-bottom: 0;
}
.articles-2-item__content {
display: flex;
flex-direction: column;
gap: 10px;
}
.articles-2-item__categories {
display: flex;
font-size: 13px;
gap: .5em;
width: 100%;
}
.articles-2-item__category:-webkit-any-link {
text-transform: uppercase;
color: #252525;
opacity: .5;
font-weight: 600;
will-change: color;
-webkit-transition: color 300ms ease;
transition: color 300ms ease;
}
.articles-2-item__category:-moz-any-link {
text-transform: uppercase;
color: #252525;
opacity: .5;
font-weight: 600;
will-change: color;
-moz-transition: color 300ms ease;
transition: color 300ms ease;
}
.articles-2-item__category:any-link {
text-transform: uppercase;
color: #252525;
opacity: .5;
font-weight: 600;
will-change: color;
transition: color 300ms ease;
display: flex;
gap: .5em;
align-items: center;
line-height: 1;
font-size: 13px;
}
.articles-2-item__category:-webkit-any-link:hover {
color: #51acfb;
}
.articles-2-item__category:-moz-any-link:hover {
color: #51acfb;
}
.articles-2-item__category:any-link:hover {
color: #51acfb;
}
.articles-2-item__title {
font-size: 37px;
line-height: 1.3;
color: #252525;
font-weight: 400;
will-change: color;
transition: color 300ms ease;
margin-top: -10px;
display: flex;width: 100%;}
.articles-2-item__title:hover {
color: #51acfb;
}
.articles-2-item__description {
font-size: 14px;
color: #252525;
font-weight: 400;
}
.articles-2-item__socials {
}
.articles-2-item__social {
}
.articles-2__social_facebook {
}
.articles-2__social-icon {
}
.articles-2__social-icon_facebook {
}
.articles-2__social_twitter {
}
.articles-2__social-icon_twitter {
}
.articles-2__socials {
gap: 7px;
display: flex;
margin-top: 5px;
align-items: center;
justify-content: center;
}
.articles-2__social {
display: flex;
width: 1em;
height: 1em;
border-radius: 50%;
font-size: 32px;
padding: .27em;
}
.articles-2__social-icon {
width: 100%;
}
.articles-2__social_twitter {
background-color: #1da1f2;
padding-left: 0.3em;
padding-right: 0.23em;
}
.articles-2__social-icon > path {
fill: white;
}
.articles-2__social_facebook {
background-color: #3b5998;
}
.articles-2__social_whatsup {
background-color: #7dd666;
}
.articles-2__social:hover {
transition: background-color 300ms ease;
will-change: background-color;
}
.articles-2__social:hover:hover {
background-color: #51acfb;
}
.articles-2__social-icon > path {
will-change: fill;
transition: background-color 300ms ease;
}
.articles-2__social:hover .articles-2__social-icon > path {
fill: #252525;
}
.articles-2__social-icon {
width: 100%;
}
.articles-2-item:not(:last-child):after {
content: '';
position: absolute;
bottom: -41px;
height: 2px;
width: 100%;
left: 0;
background-color: rgba(0, 0, 0, 0.07);
}
.articles-2-item__category:not(:last-child):after {
content: '•';
display: flex;
color: #51acfb;
font-size: 20px;
transform: translateY(-.1em);
}
.articles-2__related-item {
position: relative;
}
.articles-2__title {
will-change: color;
transition: color 300ms ease;
}
.articles-2__title:hover {
color: #51acfb;
}
.articles-2__related-item:not(:last-child):after {
content: '';
position: absolute;
bottom: -11px;
height: 2px;
width: 100%;
left: 0;
background-color: rgba(0, 0, 0, 0.07);
}