Files
web/components/HotelReservation/EnterDetails/Header/header.module.css
2024-11-29 14:58:27 +01:00

70 lines
1.1 KiB
CSS

.header {
position: relative;
overflow: hidden;
}
.hero {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
object-fit: cover;
}
.wrapper {
position: relative;
background-color: rgba(57, 57, 57, 0.5);
width: 100dvw;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
max-width: var(--max-width);
gap: var(--Spacing-x2);
padding: var(--Spacing-x3) var(--Spacing-x2);
margin: 0 auto;
}
.titleContainer {
display: flex;
flex-direction: column;
gap: var(--Spacing-x-half);
}
.title {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; /* number of lines to show */
line-clamp: 2;
-webkit-box-orient: vertical;
}
.address {
display: flex;
flex-wrap: wrap;
column-gap: var(--Spacing-x-one-and-half);
font-style: normal;
}
.toggle {
padding: 0px !important;
}
@media (min-width: 768px) {
.container {
padding: var(--Spacing-x3) var(--Spacing-x3);
}
}
@media screen and (min-width: 1367px) {
.container {
padding: var(--Spacing-x6) var(--Spacing-x5);
}
}