/* layout */

.container, .theContent {
    max-width: 768px;
}
section {
    margin-bottom: 45px;
}


.flex-wrap {
    flex-direction: row;
    flex-wrap: wrap;
}


.col-220px{
    flex-basis: 220px;
}

.lifestyle_socmed {
    align-self: self-end;
}


/* text */

.text-wrap {
    align-self: center;
}
.text-wrap h2 a, .text-wrap p, blockquote a {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -ms-box-orient: vertical;
}
.text-wrap p{
    -webkit-line-clamp: 3;
}
h3 {
    margin-bottom: 1.3rem;
}

/* images */
.img-wrap.large {
    height: 242px;
    flex-basis: 55%;
}
.img-wrap.medium {
    height: 275px;
    width: 40%;
}
.img-wrap.thumb {
    height: 180px;
}




/* lifestyle subnav */






/*cards */

.large-card p {
    font-family: "robotolight", sans-serif;
    font-size: 1.1em;
    margin-bottom: 0;
}

.list-cards {
    gap: 1em;
}
.list-cards li, .list-cards.blue li {
    flex-basis: calc(25% - 1em);
}
.list-cards h2 {
    font-size: 1.1rem;
    line-height: 1.4rem;
}
.list-cards.blue h2 {
    margin: 15px;
}
.list-cards.blue .date {
    margin: 0 0 15px;
}


/* qoutes */
#section__quotes {
    padding: 30px 30px 35px;
}

#section__quotes .date{
    margin-bottom: 20px;
}

/* newsletter */
#section__newsletter {
    gap: 15px;
}

#section__newsletter .img-wrap{
    height: 250px;
    margin-bottom: 0;
    align-items: flex-end;
}
#section__newsletter picture{
    height: 224px;
}

.newsletter-sign-up-wrap.lifestyle {
    flex-grow: 999;
    flex-basis: 0;
    margin-bottom: 3em;
    height: 250px;
    max-width: 100%;
    min-width: 768px;
}
.lifestyle .newsletter-signup-form_container {
    text-align: left;
}
.lifestyle #newsletter-signup-form {
    background-position: bottom;
    height: 185px;
    padding-left: 40px;
    background-image: url(https://media.philstar.com/assets/lifestyle/News_roundup_banner_desktop_bg.svg);
    background-color: #bb77ff;
}

.lifestyle #newsletter-signup-form p {margin-bottom: 145px;}

.lifestyle #newsletter-signup-form input {
    width: 41%;
}

.lifestyle #newsletter-signup-form button {
    width: 20%;
}


/* square ad */