app/assets/stylesheets/layout.css
.l-relative {
position: relative; }
.l-flex {
display: flex; }
.l-flex-child {
flex: 1;
}
.l-items-center {
align-items: center; }
.l-gap-2 {
gap: 0.5rem; }
.l-mr-4 {
margin-right: 1rem; }
.l-mb-0 {
margin-bottom: 0 !important; }
.l-mb-4 {
margin-bottom: 1rem; }
.l-mb-8 {
margin-bottom: 2rem; }
.l-text-red-600 {
color: #e53e3e; }
.l-text-red-600 a {
text-decoration: underline; }
.l-wrap--b {
margin-right: auto;
margin-left: auto;
overflow: auto;
width: 90%; }
.l-overflow {
overflow: auto; }
.l-wrap--b {
max-width: 940px; }
.l-colspan {
max-width: 640px; }
@media (min-width: 780px) {
.l-colspan--l, .l-colspan--r {
width: 75%;
width: calc(100% - 240px); } }
@media (min-width: 780px) {
.l-colspan--l {
padding-right: 60px;
float: left; } }
@media (min-width: 780px) {
.l-colspan--r {
float: right; } }
@media (min-width: 1200px) {
.l-colspan--r {
padding-left: 60px; } }
@media (min-width: 780px) {
.l-col--l, .l-col--l--pad, .l-col--r, .l-col--r--pad {
width: 25%;
width: calc(240px); } }
@media (max-width: 779px) {
.l-col--l, .l-col--l--pad {
margin-bottom: 60px; } }
@media (min-width: 780px) {
.l-col--l, .l-col--l--pad {
float: left; } }
@media (min-width: 780px) {
.l-col--l--pad {
padding-right: 60px; } }
@media (min-width: 780px) {
.l-col--r, .l-col--r--pad {
float: right; } }
@media (min-width: 780px) {
.l-col--r--pad {
padding-left: 60px; } }
@media (min-width: 960px) {
.l-half--l, .l-half--r {
width: 50%; } }
.l-half--l {
margin-bottom: 30px; }
@media (min-width: 960px) {
.l-half--l {
padding-right: 60px;
float: left; } }
@media (min-width: 960px) {
.l-half--r {
float: right; } }
.l-half--l--center {
text-align: center;
}
@media (min-width: 960px) {
.l-half--l--center {
width: 33%;
}
}