#software-page { .software-articles { article.software-article { display: grid; grid-template-columns: 1fr 1fr; margin: 30px 0; gap: 0 30px; background-color: $dark_2; & > * { color: $light_0; } .software-title { grid-column: 1 / span 2; background-color: $light_0; color: $medium_grey; margin: 0; padding: 20px; } .software-infos { grid-column: 1; display: flex; justify-content: space-between; align-items: center; font-size: 13px; .software-date { margin: 0 20px; color: $light_1; font-style: italic; } .software-status { margin: 0 20px; background-color: $yellow_1; color: $dark_2; padding: 10px 20px; font-weight: bold; border-radius: 20px; } } .software-subtitle { grid-column: 1; margin: 20px; } .software-description { grid-column: 1; text-align: justify; margin: 20px; } .image-carousel { grid-column: 2; grid-row: 2 / span 5; min-height: 400px; } .software-technical { grid-column: 1 / span 2; h2 { background-color: $light_1; color: $dark_2; margin: 0; padding: 10px 20px; font-size: 20px; font-style: italic; } table { border-collapse: collapse; margin: 10px 20px; tr { td { border: 1px solid $medium_grey; color: $light_0; padding: 10px 20px; *:not(a) { color: $light_0; } &:first-child { font-weight: bold; } &:last-child { ul { display: flex; flex-wrap: wrap; gap: 10px; } } } } } } @media screen and (max-width: $page_contents_center_width) { margin: 30px 20px; } @media screen and (max-width: $screen_l) { grid-template-columns: 1fr; .software-title { grid-column: 1; } .image-carousel { grid-column: 1; grid-row: 2; } .software-technical { grid-column: 1; } } } } }