<div class="c-la-content-block c-la-two-column-content">
<div class="c-la-two-column-content__column">
<h3 class="c-la-two-column-content__column-title f-title--h6">Public Hours</h3>
<div class="c-la-two-column-content__column-text f-text--small">
<p>Fridays: 10 a.m.–5 p.m.</p>
<p>Saturdays: 10 a.m.–6 p.m.</p>
<p>Sundays: 10 a.m.–5 p.m.</p>
</div>
</div>
<div class="c-la-two-column-content__column">
<h3 class="c-la-two-column-content__column-title f-title--h6">Members-only hours</h3>
<div class="c-la-two-column-content__column-text f-text--small">
<p>Fridays, Saturdays, and <br />Sundays: 10 a.m.–11 a.m. </p>
</div>
</div>
</div>
<div class="c-la-content-block c-la-two-column-content">
{% for column in columns %}
<div class="c-la-two-column-content__column">
<h3 class="c-la-two-column-content__column-title f-title--h6">{{ column.title }}</h3>
<div class="c-la-two-column-content__column-text f-text--small">
{{ column.content }}
</div>
</div>
{% endfor %}
</div>
{
"pageColorTheme": "teal",
"columns": [
{
"title": "Public Hours",
"content": "<p>Fridays: 10 a.m.–5 p.m.</p><p>Saturdays: 10 a.m.–6 p.m.</p><p>Sundays: 10 a.m.–5 p.m.</p>"
},
{
"title": "Members-only hours",
"content": "<p>Fridays, Saturdays, and <br />Sundays: 10 a.m.–11 a.m. </p>"
}
]
}
.c-la-two-column-content {
@include break($xs) {
display: flex;
}
p + p {
margin-top: 0.8rem;
}
}
.c-la-two-column-content__column {
@include break($xs) {
flex: 0 0 50%;
padding-right: 2.4rem;
}
& + & {
margin-top: 3.2rem;
@include break($xs) {
margin-top: 0;
}
}
}
.c-la-two-column-content__column-title {
margin-bottom: 1.2rem;
}
No notes defined.