.intro { width: 66vw; text-align: center; margin: auto; margin-bottom: 0.4rem; min-width: 300px !important; } .introimg { width: 66vw; margin: 0 auto; display: block; min-width: 300px !important; margin-bottom: 1rem; } .format { background-color: #f9f9f9; padding: 1.5rem 6vw; h2 { text-align: center; font-size: 1.2rem; margin-bottom: 1.2rem; } div { background-color: @primary-color; padding: 12px; color: #fff; width: 88px; display: flex; justify-content: center; align-content: center; margin-bottom: 0.4rem; } } .ibo { width: calc(100% - 4rem); display: flex; justify-content: space-around; flex-wrap: wrap; margin: 0 auto; } .column { column-span: all !important; } @media (min-width: 400px) { .column { column-count: 1; // two columns on larger phones column-gap: 12px; } .rt { width: 0px; overflow: hidden; border-left: #ddd solid 1px; } } @media (min-width: 768px) { .column { column-count: 2; // two columns on larger phones column-gap: 12px; } .rt { width: 140px; border-left: #ddd solid 1px; } } @media (min-width: 992px) { .column { column-count: 3; // three columns on...you get it column-gap: 12px; } } @media (min-width: 1200px) { .column { column-count: 4; // three columns on...you get it column-gap: 12px; } } @media (min-width: 1660px) { .column { column-count: 6; // three columns on...you get it column-gap: 12px; } } .item { display: inline-block; box-sizing: border-box; width: 100%; padding-bottom: 12px; overflow: hidden; float: left; img { width: 100%; } .title { display: flex; justify-content: center; align-items: center; width: 100%; padding: 8px 12px 0 12px; text-align: center; } } .join { display: flex; justify-content: center; padding-left: 6vw; h2 { font-size: 1rem; text-indent: 0.5rem; } p { font-size: 0.6rem; position: relative; text-indent: 0.6rem; &::before { position: absolute; left: 0; top: 0.35rem; width: 8px; height: 8px; background-color: #3d67ff; border-radius: 8px; content: ''; } } } .joinus { position: absolute; bottom: 0; padding-left: 6vw; font-size: 2rem; line-height: 3rem; color: #fff; }