.hostel-modal-container .close-hostel-modal svg, .hostel-modal-container, .directory-map-block-container .custom-clustericon::before,
.directory-map-block-container .custom-clustericon::after, .directory-map-block-container .custom-clustericon div span, .directory-map-block-container .interest-widget .content .js-close-widget, .directory-map-block-container .directory-cards ul .directory-card, .directory-map-block-container .directory-map-wrapper .directory-map .map-nav p span, .directory-map-block-container .directory-map-wrapper .directory-map .map-nav svg, .directory-map-block-container .directory-map-wrapper .directory-map .map-nav, .directory-map-block-container .directory-map-wrapper .directory-map .map-text-overlay {
transition: all 0.3s ease-out;
}
.directory-map-block-container {
--directory-map-mask: url('data:image/svg+xml,');
max-width: 100vw;
overflow: hidden;
}
.directory-map-block-container .directory-map-wrapper {
width: 100%;
-webkit-mask-box-image: var(--directory-map-mask) 1 1;
mask-border: var(--directory-map-mask) 1 1;
-webkit-mask-box-image-slice: 33.333 fill;
mask-border-slice: 33.333 fill;
}
.directory-map-block-container .directory-map-wrapper .directory-map {
min-height: 30rem;
height: 50vh;
width: 100%;
position: relative;
}
.directory-map-block-container .directory-map-wrapper .directory-map .map-text-overlay {
z-index: 1;
position: absolute;
top: -50%;
bottom: 0;
left: var(--container-standard);
transform: translateY(50%);
}
@media only screen and (min-width: calc(64rem + 1px)) {
.directory-map-block-container .directory-map-wrapper .directory-map .map-text-overlay {
left: 15%;
}
}
.directory-map-block-container .directory-map-wrapper .directory-map .map-text-overlay h2 {
font-family: var(--font-family-title-heading);
font-weight: var(--font-weight-title-heading);
text-transform: var(--text-transform-title-heading);
font-size: var(--font-size-title-heading-1);
line-height: var(--line-height-title-heading-1);
letter-spacing: var(--letter-spacing-title-heading-1);
font-style: var(--font-style-title-heading);
word-spacing: var(--word-spacing-title-heading);
color: var(--color-accent-primary);
transform: rotate(-5deg);
line-height: 0.65em;
}
.directory-map-block-container .directory-map-wrapper .directory-map .map-nav {
position: absolute;
z-index: 1;
top: var(--space-2xl);
left: var(--space-xl);
padding: var(--space-xs) var(--space-s);
display: flex;
flex-direction: row;
align-items: center;
gap: var(--space-2xs);
cursor: pointer;
border-radius: 8px;
border: 1px solid oklch(from var(--color-body) l c h/0.05);
background: var(--color-background-alt);
box-shadow: 4px 8px 24px 0 oklch(from var(--color-body) l c h/0.05);
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.directory-map-block-container .directory-map-wrapper .directory-map .map-nav.active {
opacity: 1;
visibility: visible;
pointer-events: all;
}
.directory-map-block-container .directory-map-wrapper .directory-map .map-nav svg {
width: var(--size-m-1);
height: var(--size-m-1);
color: var(--color-body);
}
.directory-map-block-container .directory-map-wrapper .directory-map .map-nav p {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--space-3xs);
font-family: var(--font-family-subtitle);
font-weight: var(--font-weight-subtitle);
text-transform: var(--text-transform-subtitle);
font-size: var(--font-size-subtitle-2);
line-height: var(--line-height-subtitle-2);
letter-spacing: var(--letter-spacing-subtitle-2);
font-style: var(--font-style-subtitle);
margin: unset;
}
.directory-map-block-container .directory-map-wrapper .directory-map .map-nav p span {
color: var(--color-body);
}
.directory-map-block-container .directory-map-wrapper .directory-map .map-nav p span:first-of-type, .directory-map-block-container .directory-map-wrapper .directory-map .map-nav p span:nth-of-type(2) {
opacity: 0.25;
}
.directory-map-block-container .directory-map-wrapper .directory-map .map-nav:hover svg {
color: var(--color-accent-primary);
}
.directory-map-block-container .directory-map-wrapper .directory-map .map-nav:hover p span:first-of-type, .directory-map-block-container .directory-map-wrapper .directory-map .map-nav:hover p span:nth-of-type(2) {
opacity: 1;
color: var(--color-accent-primary);
}
.directory-map-block-container .directory-map-wrapper .directory-map.hide-map-text-overlay .map-text-overlay {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.directory-map-block-container .directory-map-wrapper .directory-map .map {
position: absolute;
width: 100%;
height: 100%;
}
.directory-map-block-container .directory-map-wrapper .directory-map .map .gm-style .gmnoprint.gm-bundled-control {
top: var(--space-xl) !important;
}
.directory-map-block-container .directory-map-wrapper .directory-map .map .gm-style .gmnoprint.gm-bundled-control button {
background: #FFF;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
}
.directory-map-block-container .directory-map-wrapper .directory-map .map .gm-style .gmnoprint.gm-bundled-control button:first-of-type {
border-radius: 0 2px;
}
.directory-map-block-container .directory-map-wrapper .directory-map .map .gm-style .gmnoprint.gm-bundled-control button:last-of-type {
border-radius: 2px 0;
}
.directory-map-block-container .directory-map-wrapper .directory-map .map .gm-style gmp-internal-camera-control {
display: none !important;
}
.directory-map-block-container .directory-map-wrapper.hostel-level .directory-cards .directory-cards-controls::after {
aspect-ratio: 2.15/1;
}
.directory-map-block-container .directory-cards {
display: flex;
width: 100%;
margin-top: -3rem;
z-index: 2;
position: relative;
justify-content: center;
--container: 3.75rem;
--gutter: 1.5rem;
}
@media only screen and (max-width: 40rem) {
.directory-map-block-container .directory-cards {
--container: 0.844rem;
}
}
.directory-map-block-container .directory-cards .directory-cards-controls {
width: calc(100vw - var(--container) * 2);
margin-inline: calc(var(--container));
position: absolute;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 2;
top: 0;
padding-block: var(--space-2xs);
margin-block: var(--space-2xs);
pointer-events: none;
}
.directory-map-block-container .directory-cards .directory-cards-controls::after {
position: relative;
content: "";
width: calc((100vw - var(--container) * 2) / 4 - var(--gutter) * 2);
aspect-ratio: 5/3;
pointer-events: none;
opacity: 0;
visibility: hidden;
}
@media only screen and (max-width: 75rem) {
.directory-map-block-container .directory-cards .directory-cards-controls::after {
width: calc((100vw - var(--container) * 2) / 3 - var(--gutter) * 2);
}
}
@media only screen and (max-width: 64rem) {
.directory-map-block-container .directory-cards .directory-cards-controls::after {
width: calc((100vw - var(--container) * 2) / 2 - var(--gutter) * 2);
}
}
@media only screen and (max-width: 40rem) {
.directory-map-block-container .directory-cards .directory-cards-controls::after {
width: calc((100vw - var(--container) * 2) / 1 - var(--gutter) * 2);
}
}
.directory-map-block-container .directory-cards .directory-cards-controls .button {
padding: var(--space-xs);
background-color: var(--color-background-alt);
border-radius: 100%;
border-color: var(--color-background-alt);
position: absolute;
top: 50%;
transform: translateY(-50%);
pointer-events: all;
width: -moz-fit-content;
width: fit-content;
height: -moz-fit-content;
height: fit-content;
}
.directory-map-block-container .directory-cards .directory-cards-controls .button svg {
width: var(--size-m-3);
height: var(--size-m-3);
color: var(--color-body);
flex: none;
}
.directory-map-block-container .directory-cards .directory-cards-controls .button:hover {
background-color: var(--color-accent-primary);
border-color: var(--color-accent-primary);
}
.directory-map-block-container .directory-cards .directory-cards-controls .button:hover svg {
color: var(--color-background-alt);
}
.directory-map-block-container .directory-cards .directory-cards-controls .button:first-of-type {
margin-left: var(--space-2xs);
left: 0;
}
.directory-map-block-container .directory-cards .directory-cards-controls .button:last-of-type {
margin-right: var(--space-2xs);
right: 0;
}
.directory-map-block-container .directory-cards ul {
display: flex;
flex-direction: row;
gap: var(--gutter);
align-items: stretch;
}
.directory-map-block-container .directory-cards ul .slick-list {
padding-inline: calc(var(--container) + var(--gutter)) !important;
}
.directory-map-block-container .directory-cards ul .slick-track {
display: flex;
gap: var(--space-m);
align-items: stretch;
margin-left: auto;
margin-right: auto;
justify-content: center;
}
.directory-map-block-container .directory-cards ul .directory-card {
display: flex;
flex-direction: column;
background-color: var(--color-background-alt);
border-radius: 8px;
box-shadow: 4px 8px 24px 0 oklch(from var(--color-body) l c h/0.05);
width: calc((100vw - var(--container) * 2 - var(--gutter) * 5) / 4);
margin: var(--space-2xs) 0;
margin-bottom: var(--space-m);
cursor: pointer;
}
@media only screen and (min-width: calc(112rem + 1px)) {
.directory-map-block-container .directory-cards ul .directory-card {
width: calc((100vw - var(--container) * 2 - var(--gutter) * 6) / 5);
}
}
@media only screen and (max-width: 75rem) {
.directory-map-block-container .directory-cards ul .directory-card {
width: calc((100vw - var(--container) * 2 - var(--gutter) * 4) / 3);
}
}
@media only screen and (max-width: 64rem) {
.directory-map-block-container .directory-cards ul .directory-card {
width: calc((100vw - var(--container) * 2 - var(--gutter) * 3) / 2);
}
}
@media only screen and (max-width: 40rem) {
.directory-map-block-container .directory-cards ul .directory-card {
width: calc((100vw - var(--container) * 2 - var(--gutter) * 2) / 1);
margin-bottom: var(--space-2xs);
}
}
.directory-map-block-container .directory-cards ul .directory-card {
height: unset;
}
.directory-map-block-container .directory-cards ul .directory-card:hover {
transform: translateY(calc(var(--space-2xs) * -1));
background-color: var(--color-background-alt-2);
background-color: #F2F3F3;
}
.directory-map-block-container .directory-cards ul .directory-card .img {
margin: var(--space-2xs);
border-radius: 6px;
overflow: hidden;
position: relative;
aspect-ratio: 5/3;
}
.directory-map-block-container .directory-cards ul .directory-card .img img {
position: absolute;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.directory-map-block-container .directory-cards ul .directory-card .content {
display: flex;
padding: var(--space-2xs) var(--space-s) var(--space-s) var(--space-s);
flex-direction: row;
gap: var(--space-xs);
align-items: end;
justify-content: space-between;
}
.directory-map-block-container .directory-cards ul .directory-card .content button {
padding: unset;
margin: unset;
min-height: unset;
height: -moz-fit-content;
height: fit-content;
width: -moz-fit-content;
width: fit-content;
}
.directory-map-block-container .directory-cards ul .directory-card .content button svg {
color: var(--color-accent-primary);
width: var(--size-m-2);
height: var(--size-m-2);
}
.directory-map-block-container .directory-cards ul .directory-card .content .content-wrap {
display: flex;
flex-direction: column;
}
.directory-map-block-container .directory-cards ul .directory-card .content .content-wrap h4 {
margin: unset;
font-family: var(--font-family-large-heading);
font-weight: var(--font-weight-large-heading);
text-transform: var(--text-transform-large-heading);
font-size: var(--font-size-large-heading-3);
line-height: var(--line-height-large-heading-3);
letter-spacing: var(--letter-spacing-large-heading-3);
font-style: var(--font-style-large-heading);
color: var(--color-accent-primary);
}
.directory-map-block-container .directory-cards ul .directory-card .content .content-wrap p {
margin: unset;
font-family: var(--font-family-overline);
font-weight: var(--font-weight-overline);
text-transform: var(--text-transform-overline);
font-size: var(--font-size-overline-1);
line-height: var(--line-height-overline-1);
letter-spacing: var(--letter-spacing-overline-1);
font-style: var(--font-style-overline);
}
.directory-map-block-container .directory-cards ul .directory-card.hostel-level .img {
aspect-ratio: 2.15/1;
}
.directory-map-block-container .directory-cards ul .directory-card.hostel-level .content {
flex-direction: column;
align-items: start;
gap: var(--space-s);
flex: 1;
}
.directory-map-block-container .directory-cards ul .directory-card.hostel-level .content .content-wrap h4 {
font-family: var(--font-family-large-heading);
font-weight: var(--font-weight-large-heading);
text-transform: var(--text-transform-large-heading);
font-size: var(--font-size-large-heading-4);
line-height: var(--line-height-large-heading-4);
letter-spacing: var(--letter-spacing-large-heading-4);
font-style: var(--font-style-large-heading);
color: var(--color-accent-primary-dark);
}
.directory-map-block-container .directory-cards ul .directory-card.hostel-level .content .content-wrap p {
font-family: var(--font-family-subtitle);
font-weight: var(--font-weight-subtitle);
text-transform: var(--text-transform-subtitle);
font-size: var(--font-size-subtitle-3);
line-height: var(--line-height-subtitle-3);
letter-spacing: var(--letter-spacing-subtitle-3);
font-style: var(--font-style-subtitle);
color: oklch(from var(--color-body) l c h/0.5);
}
.directory-map-block-container .directory-cards ul .directory-card.hostel-level .content .buttons-wrap {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--space-3xs);
justify-content: space-between;
width: 100%;
}
.directory-map-block-container .directory-cards ul .directory-card.hostel-level .content .buttons-wrap .bar-pill {
display: flex;
flex-direction: row;
align-items: center;
padding: var(--space-3xs);
border-radius: 1000000px;
background-color: oklch(from var(--color-body) l c h/0.05);
}
.directory-map-block-container .directory-cards ul .directory-card.hostel-level .content .buttons-wrap .bar-pill .bar-icons {
display: flex;
}
.directory-map-block-container .directory-cards ul .directory-card.hostel-level .content .buttons-wrap .bar-pill .bar-icon {
border-radius: 100%;
overflow: hidden;
width: var(--size-m-2);
height: var(--size-m-2);
background-color: var(--color-body);
position: relative;
margin-left: -0.5rem;
border-inline: solid 2px #f3f3f3;
flex: none;
width: -moz-fit-content;
width: fit-content;
}
.directory-map-block-container .directory-cards ul .directory-card.hostel-level .content .buttons-wrap .bar-pill .bar-icon:first-of-type {
margin-left: unset;
border: unset;
}
.directory-map-block-container .directory-cards ul .directory-card.hostel-level .content .buttons-wrap .bar-pill .bar-icon svg, .directory-map-block-container .directory-cards ul .directory-card.hostel-level .content .buttons-wrap .bar-pill .bar-icon img {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
.directory-map-block-container .directory-cards ul .directory-card.hostel-level .content .buttons-wrap .bar-pill p {
margin-bottom: unset;
font-family: var(--font-family-label);
font-weight: var(--font-weight-label);
text-transform: var(--text-transform-label);
font-size: var(--font-size-label-2);
line-height: var(--line-height-label-2);
letter-spacing: var(--letter-spacing-label-2);
font-style: var(--font-style-label);
color: var(--color-body);
padding-inline: var(--space-2xs);
}
.directory-map-block-container .directory-cards ul .directory-card.hostel-level .content .button {
display: flex;
flex-direction: row;
align-items: center;
font-family: var(--font-family-button-text);
font-weight: var(--font-weight-button-text);
text-transform: var(--text-transform-button-text);
font-size: var(--font-size-button-text-s);
line-height: var(--line-height-button-text-s);
letter-spacing: var(--letter-spacing-button-text-s);
font-style: var(--font-style-button-text);
gap: var(--space-3xs);
color: var(--color-accent-primary);
padding: unset;
min-height: unset;
flex: 1;
width: 100%;
justify-content: end;
}
.directory-map-block-container .directory-cards ul .directory-card.hostel-level .content .button svg {
width: var(--size-m-2);
height: var(--size-m-2);
color: var(--color-accent-primary);
margin: unset;
}
.directory-map-block-container .gm-style-iw-chr {
display: none !important;
}
.directory-map-block-container .gm-style-iw-d, .directory-map-block-container .gm-style-iw.gm-style-iw-c {
padding: unset !important;
max-height: unset !important;
margin: unset;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden !important;
}
.directory-map-block-container .gm-style-iw-t div[role=dialog] {
border-radius: 8px !important;
background: var(--color-background-alt) !important;
box-shadow: 4px 8px 24px 0 oklch(from var(--color-body) l c h/0.05) !important;
}
.directory-map-block-container .interest-widget {
display: flex;
flex-direction: column;
}
.directory-map-block-container .interest-widget .img-contain {
aspect-ratio: 17/11;
position: relative;
margin: var(--space-2xs);
overflow: hidden;
border-radius: 6px;
}
.directory-map-block-container .interest-widget img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.directory-map-block-container .interest-widget .content {
display: flex;
padding: var(--space-2xs) var(--space-s) var(--space-s) var(--space-s);
flex-direction: column;
text-align: left;
position: relative;
}
.directory-map-block-container .interest-widget .content .js-close-widget {
display: none;
position: absolute;
top: 0;
right: 0;
padding: var(--space-2xs);
cursor: pointer;
}
.directory-map-block-container .interest-widget .content .js-close-widget svg {
width: var(--size-s-5);
height: var(--size-s-5);
color: var(--color-body);
}
.directory-map-block-container .interest-widget .content .js-close-widget:hover svg {
color: var(--color-secondary);
}
.directory-map-block-container .interest-widget .content h2 {
font-family: var(--font-family-small-heading);
font-weight: var(--font-weight-small-heading);
text-transform: var(--text-transform-small-heading);
font-size: var(--font-size-small-heading-2);
line-height: var(--line-height-small-heading-2);
letter-spacing: var(--letter-spacing-small-heading-2);
font-style: var(--font-style-small-heading);
margin-bottom: unset;
}
.directory-map-block-container .interest-widget .content p {
font-family: var(--font-family-body);
font-weight: var(--font-weight-body);
text-transform: var(--text-transform-body);
font-size: var(--font-size-body-2xs);
line-height: var(--line-height-body-2xs);
letter-spacing: var(--letter-spacing-body-2xs);
font-style: var(--font-style-body);
color: oklch(from var(--color-body) l c h/0.5);
margin-bottom: unset;
}
.directory-map-block-container .custom-clustericon {
background: var(--color-body);
color: var(--color-background-alt);
border-radius: 100%;
font-weight: bold;
font-size: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.directory-map-block-container .custom-clustericon div {
width: -moz-fit-content !important;
width: fit-content !important;
}
.directory-map-block-container .custom-clustericon div span {
display: flex;
flex-direction: column;
font-family: var(--font-family-label);
font-weight: var(--font-weight-label);
text-transform: var(--text-transform-label);
font-size: var(--font-size-label-1);
line-height: var(--line-height-label-1);
letter-spacing: var(--letter-spacing-label-1);
font-style: var(--font-style-label);
font-size: 24px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
letter-spacing: normal;
line-height: normal;
}
.directory-map-block-container .custom-clustericon * {
color: var(--color-accent-primary-reverse);
}
.directory-map-block-container .custom-clustericon::before,
.directory-map-block-container .custom-clustericon::after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
background: var(--color-body);
border: solid 2px var(--color-body);
border-radius: 100%;
opacity: 1;
z-index: -1;
border-radius: 100%;
}
.directory-map-block-container .custom-clustericon:hover span {
color: var(--color-accent-primary-darker);
}
.directory-map-block-container .custom-clustericon:hover::before, .directory-map-block-container .custom-clustericon:hover::after {
border: solid 2px var(--color-accent-primary-darker);
background-color: var(--color-background-alt);
}
.hostel-modal-container {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
display: flex;
justify-content: center;
opacity: 0;
visibility: hidden;
pointer-events: none;
padding-block: var(--space-2xl);
overflow: auto;
z-index: 9999;
}
.hostel-modal-container.active {
opacity: 1;
visibility: visible;
pointer-events: all;
}
@media only screen and (max-width: 48rem) {
.hostel-modal-container {
padding: unset;
}
}
.hostel-modal-container .hostel-modal-wrap {
position: relative;
display: flex;
justify-content: center;
width: 80%;
}
@media only screen and (max-width: 48rem) {
.hostel-modal-container .hostel-modal-wrap {
width: 100%;
}
.hostel-modal-container .hostel-modal-wrap .close-hostel-modal {
background: var(--color-accent-primary);
padding: var(--space-xs);
width: -moz-fit-content;
width: fit-content;
height: -moz-fit-content;
height: fit-content;
aspect-ratio: 1/1;
z-index: 999;
}
}
.hostel-modal-container .hostel-modal {
background-color: var(--color-background-alt);
border-radius: 16px;
box-shadow: 4px 8px 24px 0 oklch(from var(--color-body) l c h/0.05);
overflow: auto;
width: 100%;
position: relative;
}
@media only screen and (max-width: 48rem) {
.hostel-modal-container .hostel-modal {
width: 100vw;
border-radius: unset;
}
}
.hostel-modal-container .close-hostel-modal {
position: absolute;
top: var(--space-s);
right: var(--space-s);
}
.hostel-modal-container .close-hostel-modal svg {
height: var(--size-m-5);
width: var(--size-m-5);
color: var(--color-background-alt);
}
.hostel-modal-container .close-hostel-modal:hover svg {
color: var(--color-accent-primary);
}
.hostel-modal-inner {
display: flex;
flex-direction: column;
gap: var(--space-l);
}
.hostel-modal-inner header {
position: relative;
}
.hostel-modal-inner header .hostel-modal-gallery-content {
position: absolute;
width: 100%;
height: -moz-fit-content;
height: fit-content;
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding: var(--space-m) var(--container-wide);
gap: 125px;
bottom: 0;
left: 0;
justify-content: space-between;
z-index: 1;
}
@media only screen and (max-width: 48rem) {
.hostel-modal-inner header .hostel-modal-gallery-content {
flex-direction: column;
}
}
.hostel-modal-inner header .hostel-modal-gallery-content .hostel-modal-gallery-controls {
display: flex;
}
@media only screen and (max-width: 48rem) {
.hostel-modal-inner header .hostel-modal-gallery-content .hostel-modal-gallery-controls {
justify-content: center;
}
}
.hostel-modal-inner header .hostel-modal-gallery-content .hostel-modal-gallery-controls .hostel-modal-gallery-numbers {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--space-2xs);
}
.hostel-modal-inner header .hostel-modal-gallery-content .hostel-modal-gallery-controls .hostel-modal-gallery-numbers span {
font-family: var(--font-family-body);
font-weight: var(--font-weight-body);
text-transform: var(--text-transform-body);
font-size: var(--font-size-body-m);
line-height: var(--line-height-body-m);
letter-spacing: var(--letter-spacing-body-m);
font-style: var(--font-style-body);
}
.hostel-modal-inner header .hostel-modal-gallery-content .hostel-modal-gallery-controls .hostel-modal-gallery-numbers .slash {
width: var(--size-s-5);
height: 4px;
color: var(--color-body);
background: var(--color-body);
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
.hostel-modal-inner header .hostel-modal-gallery-content .hostel-modal-gallery-controls .buttons {
margin: unset;
padding: unset;
display: flex;
flex-direction: row;
align-items: center;
gap: var(--space-s);
}
@media only screen and (max-width: 48rem) {
.hostel-modal-inner header .hostel-modal-gallery-content .hostel-modal-gallery-buttons.desktop-buttons {
display: none;
}
}
.hostel-modal-inner header .hostel-modal-gallery {
position: relative;
width: 100%;
aspect-ratio: 2/1;
max-height: 32rem;
--mask-image: url('data:image/svg+xml,');
-webkit-mask-box-image: var(--mask-image) 1 1;
mask-border: var(--mask-image) 1 1;
-webkit-mask-box-image-slice: 33.333 fill;
mask-border-slice: 33.333 fill;
border-radius: 4px;
overflow: hidden;
}
@media only screen and (max-width: 48rem) {
.hostel-modal-inner header .hostel-modal-gallery {
aspect-ratio: 1/1;
max-height: unset;
}
}
.hostel-modal-inner header .hostel-modal-gallery img {
-o-object-position: center;
object-position: center;
width: 100%;
height: -moz-fit-content;
height: fit-content;
aspect-ratio: 2/1;
}
@media only screen and (max-width: 48rem) {
.hostel-modal-inner header .hostel-modal-gallery img {
aspect-ratio: 1/1;
height: unset;
}
}
.hostel-modal-inner header .hostel-modal-gallery img {
-o-object-fit: cover;
object-fit: cover;
position: absolute;
}
.hostel-modal-inner header .hostel-modal-gallery::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
inset: 0;
opacity: 0.6;
background: linear-gradient(180deg, #081516 0%, rgba(8, 21, 22, 0) 100%);
background-blend-mode: luminosity;
}
.hostel-modal-inner .hostel-modal-content {
display: flex;
flex-direction: row;
gap: var(--gutter-standard);
justify-content: space-between;
padding: 0 var(--space-2xl) var(--space-xl);
}
@media only screen and (max-width: 48rem) {
.hostel-modal-inner .hostel-modal-content {
flex-direction: column;
gap: var(--space-m);
}
}
.hostel-modal-inner .hostel-modal-content .hostel-modal-mobile-details {
display: none;
}
@media only screen and (max-width: 48rem) {
.hostel-modal-inner .hostel-modal-content .hostel-modal-mobile-details {
display: flex;
width: 100%;
}
.hostel-modal-inner .hostel-modal-content .hostel-modal-mobile-details .buttons {
width: 100%;
}
.hostel-modal-inner .hostel-modal-content .hostel-modal-mobile-details .buttons .button {
flex: 1;
justify-content: center;
text-align: center;
}
}
.hostel-modal-inner .hostel-modal-content .hostel-modal-content-details {
display: flex;
flex-direction: column;
gap: var(--space-s);
width: 55%;
}
@media only screen and (max-width: 48rem) {
.hostel-modal-inner .hostel-modal-content .hostel-modal-content-details {
width: 100%;
}
}
.hostel-modal-inner .hostel-modal-content .hostel-modal-content-details .hostel-title {
display: flex;
flex-direction: column;
gap: var(--space-3xs);
}
.hostel-modal-inner .hostel-modal-content .hostel-modal-content-details .hostel-title h2 {
font-family: var(--font-family-large-heading);
font-weight: var(--font-weight-large-heading);
text-transform: var(--text-transform-large-heading);
font-size: var(--font-size-large-heading-2);
line-height: var(--line-height-large-heading-2);
letter-spacing: var(--letter-spacing-large-heading-2);
font-style: var(--font-style-large-heading);
margin: unset;
color: var(--color-accent-primary-dark);
}
.hostel-modal-inner .hostel-modal-content .hostel-modal-content-details .hostel-title p {
font-family: var(--font-family-subtitle);
font-weight: var(--font-weight-subtitle);
text-transform: var(--text-transform-subtitle);
font-size: var(--font-size-subtitle-2);
line-height: var(--line-height-subtitle-2);
letter-spacing: var(--letter-spacing-subtitle-2);
font-style: var(--font-style-subtitle);
margin: unset;
}
.hostel-modal-inner .hostel-modal-content .hostel-modal-content-details .hostel-intro p {
font-family: var(--font-family-body);
font-weight: var(--font-weight-body);
text-transform: var(--text-transform-body);
font-size: var(--font-size-body-s);
line-height: var(--line-height-body-s);
letter-spacing: var(--letter-spacing-body-s);
font-style: var(--font-style-body);
}
.hostel-modal-inner .hostel-modal-content .hostel-modal-content-details .hostel-intro p:last-of-type {
margin-bottom: unset;
}
.hostel-modal-inner .hostel-modal-content .hostel-modal-content-details .hostel-further-details {
display: flex;
flex-direction: column;
}
.hostel-modal-inner .hostel-modal-content .hostel-modal-content-details .hostel-further-details h4 {
margin-bottom: unset;
color: var(--color-accent-primary);
font-family: var(--font-family-small-heading);
font-weight: var(--font-weight-small-heading);
text-transform: var(--text-transform-small-heading);
font-size: var(--font-size-small-heading-1);
line-height: var(--line-height-small-heading-1);
letter-spacing: var(--letter-spacing-small-heading-1);
font-style: var(--font-style-small-heading);
margin-bottom: var(--space-2xs);
}
.hostel-modal-inner .hostel-modal-content .hostel-modal-content-details .hostel-further-details .hostel-info {
display: flex;
flex-direction: column;
gap: var(--space-3xs);
}
.hostel-modal-inner .hostel-modal-content .hostel-modal-content-details .hostel-further-details .hostel-info .hostel-info-item {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--space-3xs);
}
.hostel-modal-inner .hostel-modal-content .hostel-modal-content-details .hostel-further-details .hostel-info .hostel-info-item .icon svg {
width: var(--size-m-1);
height: var(--size-m-1);
color: var(--color-accent-primary);
}
.hostel-modal-inner .hostel-modal-content .hostel-modal-content-details .hostel-further-details .hostel-info .hostel-info-item p, .hostel-modal-inner .hostel-modal-content .hostel-modal-content-details .hostel-further-details .hostel-info .hostel-info-item a {
font-family: var(--font-family-body);
font-weight: var(--font-weight-body);
text-transform: var(--text-transform-body);
font-size: var(--font-size-body-s);
line-height: var(--line-height-body-s);
letter-spacing: var(--letter-spacing-body-s);
font-style: var(--font-style-body);
margin-bottom: unset;
color: var(--color-body);
}
.hostel-modal-inner .hostel-modal-content .hostel-modal-content-details .hostel-further-details .hostel-travel-locations {
display: flex;
flex-direction: column;
gap: var(--space-2xs);
margin-top: var(--space-s);
}
.hostel-modal-inner .hostel-modal-content .hostel-modal-content-details .hostel-further-details .hostel-travel-locations .hostel-travel-location {
display: flex;
flex-direction: column;
gap: var(--space-3xs);
}
.hostel-modal-inner .hostel-modal-content .hostel-modal-content-details .hostel-further-details .hostel-travel-locations .hostel-travel-location h4 {
font-family: var(--font-family-small-heading);
font-weight: var(--font-weight-small-heading);
text-transform: var(--text-transform-small-heading);
font-size: var(--font-size-small-heading-3);
line-height: var(--line-height-small-heading-3);
letter-spacing: var(--letter-spacing-small-heading-3);
font-style: var(--font-style-small-heading);
color: var(--color-body);
margin-bottom: unset;
}
.hostel-modal-inner .hostel-modal-content .hostel-modal-content-details .hostel-further-details .hostel-travel-locations .hostel-travel-location ul {
display: flex;
flex-direction: column;
gap: var(--space-3xs);
margin: unset;
padding: unset;
}
.hostel-modal-inner .hostel-modal-content .hostel-modal-content-details .hostel-further-details .hostel-travel-locations .hostel-travel-location ul li {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--space-2xs);
justify-content: space-between;
margin-bottom: unset;
padding-left: calc(var(--space-2xs) + var(--size-s-3));
}
.hostel-modal-inner .hostel-modal-content .hostel-modal-content-details .hostel-further-details .hostel-travel-locations .hostel-travel-location ul li .location-name {
font-family: var(--font-family-body);
font-weight: var(--font-weight-body);
text-transform: var(--text-transform-body);
font-size: var(--font-size-body-s);
line-height: var(--line-height-body-s);
letter-spacing: var(--letter-spacing-body-s);
font-style: var(--font-style-body);
color: oklch(from var(--color-body) l c h/0.75);
margin: unset;
}
.hostel-modal-inner .hostel-modal-content .hostel-modal-content-details .hostel-further-details .hostel-travel-locations .hostel-travel-location ul li .distance-time {
font-family: var(--font-family-overline);
font-weight: var(--font-weight-overline);
text-transform: var(--text-transform-overline);
font-size: var(--font-size-overline-2);
line-height: var(--line-height-overline-2);
letter-spacing: var(--letter-spacing-overline-2);
font-style: var(--font-style-overline);
color: oklch(from var(--color-body) l c h/0.75);
margin: unset;
}
.hostel-modal-inner .hostel-modal-content .hostel-modal-content-details .hostel-further-details .hostel-travel-locations .hostel-travel-location ul li::before {
left: 0;
border: unset;
border-radius: 100%;
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
background-color: var(--color-accent-primary);
height: var(--size-s-3);
width: var(--size-s-3);
flex: none;
border-radius: unset;
-webkit-mask-size: 100%;
mask-size: 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.hostel-modal-inner .hostel-modal-content .hostel-modal-content-cta {
flex: 1;
}
.hostel-modal-inner .hostel-modal-content .hostel-modal-content-cta .modal-cta {
aspect-ratio: 3/4;
padding: var(--space-m);
border-radius: 8px;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: flex-end;
gap: var(--gutter-tight);
position: relative;
flex: 1;
}
@media only screen and (max-width: 48rem) {
.hostel-modal-inner .hostel-modal-content .hostel-modal-content-cta .modal-cta {
align-items: start;
}
}
.hostel-modal-inner .hostel-modal-content .hostel-modal-content-cta .modal-cta .modal-cta-action {
position: absolute;
top: var(--space-m);
right: var(--space-m);
z-index: 1;
}
.hostel-modal-inner .hostel-modal-content .hostel-modal-content-cta .modal-cta .modal-cta-action svg {
width: var(--size-m-4);
height: var(--size-m-4);
color: var(--color-body);
}
.hostel-modal-inner .hostel-modal-content .hostel-modal-content-cta .modal-cta::before {
position: absolute;
content: "";
width: 100%;
height: 100%;
inset: 0;
opacity: 1;
background: linear-gradient(180deg, #081516 0%, rgba(8, 21, 22, 0) 100%);
background-blend-mode: luminosity;
border-radius: 8px;
z-index: 1;
}
.hostel-modal-inner .hostel-modal-content .hostel-modal-content-cta .modal-cta .modal-cta-image {
position: absolute;
width: 100%;
height: 100%;
inset: 0;
}
.hostel-modal-inner .hostel-modal-content .hostel-modal-content-cta .modal-cta .modal-cta-image img {
position: absolute;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
inset: 0;
}
.hostel-modal-inner .hostel-modal-content .hostel-modal-content-cta .modal-cta .modal-cta-logo {
position: absolute;
top: var(--space-m);
left: var(--space-m);
width: 89px;
z-index: 1;
}
.hostel-modal-inner .hostel-modal-content .hostel-modal-content-cta .modal-cta .modal-cta-logo img {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
.hostel-modal-inner .hostel-modal-content .hostel-modal-content-cta .modal-cta .modal-cta-content {
display: flex;
flex-direction: column;
gap: var(--space-3xs);
z-index: 1;
}
.hostel-modal-inner .hostel-modal-content .hostel-modal-content-cta .modal-cta .modal-cta-content h4 {
margin-bottom: unset;
font-family: var(--font-family-large-heading);
font-weight: var(--font-weight-large-heading);
text-transform: var(--text-transform-large-heading);
font-size: var(--font-size-large-heading-4);
line-height: var(--line-height-large-heading-4);
letter-spacing: var(--letter-spacing-large-heading-4);
font-style: var(--font-style-large-heading);
}
.hostel-modal-inner .hostel-modal-content .hostel-modal-content-cta .modal-cta .modal-cta-content p {
margin-bottom: unset;
font-family: var(--font-family-body);
font-weight: var(--font-weight-body);
text-transform: var(--text-transform-body);
font-size: var(--font-size-body-xs);
line-height: var(--line-height-body-xs);
letter-spacing: var(--letter-spacing-body-xs);
font-style: var(--font-style-body);
}
/*# sourceMappingURL=directory_map.css.map */