Template:Intro to/sandbox/styles.css

/* */

.introto__main {

display: flex;

position: relative;

box-sizing: border-box;

box-shadow: 2px 2px 2px #CCC;

flex-direction: row;

flex-wrap: wrap;

max-width: 1100px;

max-width: 100%;

overflow: hidden;

border: 1px solid black;

margin: auto;

}

.introto__main-title {

font-size: 250%;

background: #777;

color: #FFF;

text-align: center;

align-items: center;

justify-content: center;

}

.introto__lead {

background: #EEE;

padding: 30px 60px;

margin-bottom: 30px;

}

.introto__base {

max-width: 1060px;

min-height: 55px;

margin: auto;

padding: 5px 20px;

font-size: 1.1em;

background: #EEE;

border: 1px solid lightgrey;

}

.introto__tabs-main {

height: auto;

}

.introto__tabs-title {

font-size: 1.5em;

font-weight: bold;

}

.introto__columns {

display: flex;

flex-direction: row;

flex-wrap: wrap-reverse;

justify-content: center;

}

.introto__columns-left {

display: inline-block;

flex: 0 1 0;

position: relative;

vertical-align: top;

min-width: 260px;

padding-bottom: 50px;

}

.introto__columns-left-button {

position: absolute;

bottom: 0;

padding-left: 2em;

}

.introto__columns-right {

display: inline-block;

flex: 1 1 0;

padding: 1em;

min-width: 250px;

vertical-align: top;

border-left: 1px solid #c9c9c9;

}

@media screen and (min-width: 1100px) {

.introto__main {

max-width: 1100px;

}

}

@media screen and (min-width: 800px) {

.introto__tabs-main {

padding: 0.5em;

}

.introto__columns-right{

padding: 40px;

}

.introto__columns-left {

padding-bottom: 80px;

}

.introto__columns-left-button{

padding-bottom: 33px;

}

}