.page-banner {
min-height: 300px;
background-repeat: no-repeat;
background-size: cover;
}
.grid-container {
display: grid;
grid-template-columns: 75% 25%;
margin: 4em auto 4em auto;
max-width: 80%;
column-gap: 2em;
}
ul.sidebar-areas-list::-webkit-scrollbar-thumb {
background-color: lightgrey;
border-radius: 24px;
}
.sidebar-areas-list::-webkit-scrollbar {
background-color: transparent;
width: 3px;
}
.sidebar-areas-list-container {
background-color: #F0F0F0;
padding: 30px;
height: fit-content;
margin: 0;
margin-bottom: 1em;
border-radius: 24px;
}
.active-area {
text-decoration: underline !important;
}
.sidebar-areas-list {
display: grid;
row-gap: 0.5em;
max-height: 200px;
overflow-y: auto !important;
list-style-type: none;
padding: 0;
margin: 0;
background: linear-gradient(rgb(240, 240, 240) 30%, rgba(255, 255, 255, 0)) center top, linear-gradient(rgba(255, 255, 255, 0), rgb(240, 240, 240) 70%) center bottom, radial-gradient(farthest-side at 50% 0, rgba(133, 133, 133, 0.2), rgba(0, 0, 0, 0)) center top, radial-gradient(farthest-side at 50% 100%, rgba(133, 133, 133, 0.2), rgba(0, 0, 0, 0)) center bottom;
background-repeat: no-repeat;
background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
background-attachment: local, local, scroll, scroll;
}
.sidebar-areas-list a {
text-decoration: none;
font-size: 1.05rem;
margin-top: 1em;
}
.area-list-container {
margin-bottom: 2em;
}
.area-list-container h3 {
margin-bottom: 20px;
font-size: 24px;
}
ul.area-list-ul {
margin: 0;
padding: 0;
display: grid;
row-gap: 1em;
list-style: none;
grid-template-columns: auto auto auto auto auto;
}
.sidebar-list-title {
font-size: 1.25rem;
font-weight: bold;
margin: 0;
padding-top: 0;
font-size: 20px;
}
li.area-list-point::before {
display: inline-block;
content: "\7a";
font-family: "template";
margin-right: 8px;
color: #42B3E5;
}
li.sidebar-list-point::before {
content: unset;
}
li.sidebar-list-point {
padding: unset;
overflow-y: hidden;
}
li.area-list-point {
font-size: 1rem;
line-height: 1.7;
position: relative;
}
.location-info-card {
background-color: #F0F0F0;
padding: 30px;
border-radius: 24px;
margin-bottom: 1em;
}
.location-info-card p {
padding: 0;
margin: 0;
}
.location-info-card a {
display: block;
}
.cta-container {
width: 100%;
margin: 2em 0 2em 0;
}
.cta-button {
display: block;
margin: auto;
padding: 1em;
border-radius: 14px;
color: white;
background-color: #1f72d0;
width: fit-content;
text-align: center;
}
@media only screen and (max-width: 1100px) {
.grid-container {
max-width: 90%;
}
}
@media only screen and (max-width: 900px) {
.grid-container {
grid-template-columns: auto;
max-width: 90%;
}
ul.area-list-ul {
grid-template-columns: auto;
margin-bottom: 1em;
}
}
@media only screen and (max-width: 767px) {
.grid-container {
grid-template-columns: auto;
max-width: 90%;
}
ul.area-list-ul {
grid-template-columns: auto;
margin-bottom: 1em;
}
.area-list-container h3 {
font-size: 20px;
}
}