#main { min-height: 100vh; } // Content .section { text-align: center; height: 100%; @media screen and (min-width: 991px) { display: -webkit-box; display: -ms-flexbox; display: flex; height: 100vh; text-align: left; } .article { width: 100%; @media screen and (min-width: 991px) { height: 100%; } &.content { h1 { @media screen and (min-width: 991px) { display: flex; align-items: center; height: 100%; max-height: calc(50% - 50px); } } .wp-block-pullquote { padding-bottom: 20px; margin-right: var(--gap); } .table-availability { margin-bottom: 30px; caption { font-size: 24px; } } } } .media { display: -webkit-box; display: -ms-flexbox; display: flex; @media screen and (max-width: 990px) { margin-top: 60px; } .availability-checker { position: relative; @media screen and (min-width: 991px) { margin-left: var(--gap); letter-spacing: 2px; } .wp-tag { position: absolute; top: 0; left: 0; } h2 { padding: var(--gap) 0; @media screen and (min-width: 991px) { display: flex; align-items: center; padding: 0; height: 100%; max-height: calc(50% - 50px); } } .checker-demo { text-align: center; .primary { margin-right: 10px; @media screen and (max-width: 990px) { padding: 10px 15px; } } .sm-grey { display: inline-block; } } .wp-block-image { margin: 30px auto 0; img { margin: 0 auto; } } @media screen and (min-width: 768px) and (max-width: 990px) { > *:not(figure) { max-width: calc(50% - 30px); width: 100%; } > .wp-block-image { float: right; margin-top: -25%; } } } } } // Footer .footer { padding: var(--gap) 0; margin-top: 30px; background: #fff; @media screen and (min-width: 991px) { margin-top: 200px; margin-bottom: -200px; } &-credits { text-align: center; p + p { margin-top: 5px; } } }