#content {    flex: 1;}#articles {    border-top: 1px solid rgba(255, 255, 255, 0.2);    border-bottom: 1px solid rgba(255, 255, 255, 0.2);    padding: 2rem 0;    margin-bottom: 2rem;}#articles > div {    display: flex;    flex-flow: row wrap;    box-sizing: border-box;    margin: 0 -1rem;}#articles > div > article {    flex: 33.3333%;    color: #ffff;    padding: 0 1rem;    box-sizing: border-box;    display: flex;    flex-flow: column;}#articles article h1 {    font-size: 1.2rem;    transition: all 0.5s;    font-weight: 600;		text-align: center;}#articles article img {    display: block;    transition: all 0.5s;    object-fit: cover;    width: 100%;    height: 100%;}#articles article .cover {    color: rgba(255, 255, 255, 0.7);    aspect-ratio: 1 / 1;    overflow: hidden;    display: flex;    align-items: center;    justify-content: center;}#articles article .desc {    font-weight: 100;    padding-top: 1rem;    cursor: pointer;		text-align: center;}#articles article .desc:hover {    color: rgba(255, 255, 255, 0.7);}/* ==============================================================================    = MODAL=============================================================================== */.modal .content {    color: rgba(255, 255, 255, 0.7);		text-align: center;}.modal h1 {		text-align: center;}.modal .copyrit {		margin-top: 50px;	text-align: center;	font-style: italic;	color: #fff;	font-size: 0.8rem;}@media (max-width: 960px) {    #articles > div > article {        flex: 0 0 500px;        margin: auto;        padding: 0 0 1.8rem;        margin-bottom: 2rem;    }}@media (max-width: 720px) {    #articles > div > article {        flex: 0 0 400px;    }}@media (max-width: 540px) {    #articles > div > article {        flex: 0 0 100%;        padding: 0 1rem;    }}