.media-item {
width: 97%;
/* max-width: 750px; */
}

.media-item section {
display: flex;
flex-direction: row;
justify-content: space-between;
}

.media-item section img {
width: 100%;
min-width: 30%;
object-fit: scale-down;
}

.media-item section .image {
width: 200px;
height: 120px;
overflow: hidden;
padding: 0;
margin-right: 20px;
}

.media-item section article {
display: flex;
flex-direction: column;
min-width: 70%;
max-width: 500px;
}

.media-heading {
/*  max-height: 42px;
max-width: 470px;
display: block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;*/
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}

@media (max-width: 1200px) {
.media-item {
    /* max-width: 600px; */
}

.media-item section article {
    max-width: 380px;
}

.media-heading {
    max-width: 380px;
}
}

@media (max-width: 992px) {
.media-item {
    width: 95%;
    /* max-width: 430px; */
}

.media-item section {
    display: flex;
    flex-direction: column;
}

.media-item section .image {
    width: 100%;
    margin-right: 0px;
}

.media-item section article {
    max-width: 400px;
}

.media-heading {
    height: auto;
    max-width: 400px;
    white-space: wrap;

}
}

@media (max-width: 530px) {
.media-item {
    width: 93%;
    /* max-width: 400px; */
}

.media-item section article {
    max-width: 380px;
}

.media-heading {
    max-width: 380px;
}
}

@media (max-width: 414px) {
.media-item {
    width: 91%;
    /* max-width: 300px; */
}

.media-item section article {
    max-width: 280px;
}

.media-heading {
    max-width: 280px;
}
}

.media-item section article .par {
/* height: 40px; */
overflow: hidden;
}

.media-item .tags {
display: flex;
flex-direction: row;
flex-wrap: wrap;
max-width: 490px;
}

.media-item .tags p {
width: fit-content;
padding: 1px 5px;
margin-right: 5px;
background-color: rgba(0, 31, 68, .7);
color: #fff;
border-radius: 5px;
}

.media-item section article .all-button {
display: flex;
flex-direction: row;
justify-content: end;
align-self: flex-end;
}

.media-heading .label {

display: inline;
padding: 0.2em 0.6em 0.3em;
font-size: 75%;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: 0.25em;

}

.pin-image {
height: 16px;
width: 16px;
}

.title-container {
display: flex;
justify-content: space-between;
}

.button-icon,
.button-icon-user {
z-index: 1000;
border: none;
cursor: pointer;
appearance: none;
background-color: inherit;
transition: transform 0.7s ease-in-out;
}
.pin{
color:#0057C1 
}