@media (max-width:1120px) {
:root {
--maxwidth: 768px;
} .header {
grid-template-columns: 300px auto;
}
.header .search-mobile {
display: flex;
}
.header-mid {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--color1);
padding: 20px;
display: none;
}
.header-mid .toptext {
color: var(--colorwhite);
}
.header-mid button {
background: var(--color2);
} .benefit {
grid-template-columns: 1fr!important;
} .properti-wilayah ul {
grid-template-columns: repeat(3, 1fr);
} #content {
flex-direction: column;
}
#content ._left {
width: 100%;
position: unset;
}
#content ._right {
position: fixed;
top: 0!important;
left: -350px;
width: 350px;
z-index: 999;
padding: 20px;
background: var(--colorlight);
border-right: 1px solid var(--colorborder);
height: 100vh;
transition: .3s;
overflow: auto;
}
#content ._right.active {
left: 0;
} .side-bttn {
display: flex;
} .grid._res {
grid-template-columns: repeat(2, 1fr)!important;
}
}
@media (max-width:760px) {
:root {
--maxwidth: 420px;
} .header {
grid-template-columns: 50% auto;
}
#typewriter-list {
display: none;
}
.header-right > div {
gap: 5px!important;
}
.topagen span{
display: none;
} .konten-slider {
max-width: var(--maxwidth);
} .properti-wilayah ul {
grid-template-columns: repeat(2, 1fr);
}
.properti-wilayah.bg ._title, .properti-wilayah.bg ul {
margin-right: 0;
}
.properti-wilayah ._img {
opacity: .2;
} .list._res .loop._properti,
.list._res .loop._blog {
flex-direction: column;
}
.list._res .loop._properti ._pigura,
.list._res .loop._blog ._pigura {
width: 100%;
height: 220px;
}
.list._res .loop._properti ._content,
.list._res .loop._blog ._content {
width: 100%;
} .prop-galeri .ofc {
height: 200px;
} #footer {
grid-template-columns: 1fr;
}
#footer > div:first-child {
grid-column: unset;
}
.copyright {
display: flex;
flex-direction: column-reverse;
gap: 20px;
text-align: center;
} .prop-detail._properti ._detail {
grid-template-columns: 1fr;
}
.prop-fasilitas ul {
grid-template-columns: repeat(2, 1fr);
} .grid._res {
grid-template-columns: 1fr!important;
} .single-blog ._detail {
flex-direction: column;
gap: 5px!important;
}
.comment-form {
grid-template-columns: 100%;
}
.comment-notes, .comment-form-comment, .comment-form-cookies-consent, .form-submit {
grid-column: unset;
}
}
@media (max-width:420px) {
:root {
--autopad: 20px;
}
.search-properti {
display: grid;
grid-template-columns: 40% 40% auto;
width: 100%;
}
}