.facilities-page {
--color-primary: #144738;
--color-primary-light: rgba(20, 71, 56, 0.8);
}
.facility-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.facility-grid > :last-child:nth-child(odd) {
grid-column: 1 / -1;
justify-self: center;
width: 50%;
}
.facility-grid__item {
position: relative;
overflow: hidden;
display: block;
}
.facility-grid__image {
width: 100%;
height: auto;
max-height: 240px;
display: block;
transition: transform 0.4s ease;
object-fit: cover;
}
.facility-grid__item:hover .facility-grid__image {
transform: scale(1.05);
}
.vertical-label {
position: absolute;
bottom: 0;
right: 0;
writing-mode: vertical-rl;
text-orientation: upright;
text-align: center;
font-size: 16px;
height: 100%;
color: var(--color-text-light);
background-color: var(--color-primary-light);
padding: 12px 2px;
font-family: var(--font-primary);
z-index: 2;
}
.facility-section {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.facility-detail {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
justify-self: center;
position: relative;
z-index: 2;
margin: auto;
width: 100vw;
height: auto;
}
.facility-detail__content {
display: flex;
flex-direction: column;
max-width: var(--container-max-width);
padding: var(--spacing-lg) var(--spacing-md);
width: 100%;
height: auto;
align-items: center;
justify-self: center;
justify-items: center;
gap: 30px;
overflow: hidden;
}
.facility-detail__header {
display: flex;
flex-direction: column;
gap: 18px;
text-align: center;
}
.facility-detail__title {
font-family: var(--font-primary);
color: var(--color-primary-light);
font-weight: 100;
font-size: var(--desktop-title-size);
}
.facility-detail__description {
font-family: var(--font-primary);
font-size: var(--desktop-paragraph-size);
color: var(--color-secondary);
text-align: center;
}
.facility-detail__layout {
padding: var(--spacing-lg) var(--spacing-md);
display: flex;
flex-direction: row-reverse;
max-width: 100%;
width: 100%;
height: auto;
align-items: center;
justify-self: center;
justify-items: center;
gap: 5%;
overflow: hidden;
justify-content: center;
}
.facility-detail__layout--no-padding {
padding: 0;
}
.facility-detail__image {
width: 47.5%;
max-height: 290px;
overflow: hidden;
position: relative;
}
.facility-detail__image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: bottom;
display: block;
}
.facility-detail__info {
display: flex;
flex-direction: column;
width: 47.5%;
gap: 10px;
}
.facility-detail__info ul {
font-family: var(--font-primary);
font-size: var(--desktop-paragraph-size);
list-style-type: disc;
padding-left: 1.5em;
}
.facility-detail__info li {
font-family: var(--font-primary);
font-size: var(--desktop-paragraph-size);
margin-bottom: 10px;
} .btn--facility-more {
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
color: var(--color-primary);
border-radius: var(--border-radius);
font-family: var(--font-primary);
padding: 5px;
border: solid 1px;
transition: all 0.5s;
width: 150px;
height: 38px;
letter-spacing: 0.1em;
background-color: transparent;
font-size: var(--desktop-paragraph-size);
margin-top: 15px;
}
.btn--facility-more:hover {
color: var(--color-text-light);
background-color: var(--color-primary);
border-color: var(--color-primary);
} @media (max-width: 767px) {
.facility-grid {
grid-template-columns: 1fr;
}
.facility-grid > :last-child:nth-child(odd) {
width: 100%;
}
.facility-grid__image {
max-height: 120px;
}
.vertical-label {
font-size: 12px;
}
.facility-detail__content {
padding: 10vw 4vw;
}
.facility-detail__layout {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
width: 100%;
}
.facility-detail__image {
width: 100%;
height: 350px;
padding-bottom: 10px;
}
.facility-detail__info {
width: 100%;
}
.facility-detail__title {
font-size: var(--mobile-title-size);
}
.facility-detail__description,
.facility-detail__info,
.facility-detail__info li {
font-size: var(--mobile-font-size);
}
.facility-detail__info-content{
margin: auto;
}
.btn--facility-more{
justify-self: center;
}
}