.city-page {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.city-page > .city-layout {
    flex: 1 0 auto;
    height: auto;
}

.city-page > footer {
    flex-shrink: 0;
}

.city-page .content {
    min-width: 0;
}

/* The shared section rule defines the outer columns, not article sections. */
.city-page .agent-articles {
    display: block;
    height: auto;
    width: 100%;
    font-size: 1rem;
    text-align: left;
}

.city-page .agent-articles .list-group-item {
    overflow-wrap: anywhere;
}

.text-content {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}


.post-container {
    background: light-dark(#746947, #202020);
    padding: 10px;
    margin-top: 90px;
    margin-left: 45px;
    margin-right: 90px;
    padding-top: 25px;
    padding-left: 89px;
    padding-right: 89px;
    border: 1px solid light-dark(#bbbbbb,#444444);
    border-radius: 10%;
}

.img-container img {
    padding: 5px;
    width: 310px;
    height: 310px;
    border-radius: 15%;
}

.carousel-item img {
    padding: 5px;
    width: 310px;
    height: 310px;
    border-radius: 15%;
}


.form-container {
    background: light-dark(#746947, #202020);
    border: 1px solid light-dark(#bbbbbb, #444444);
    border-radius: 10%;
    margin: 40px;
}

.inner-form-container {
    border: 1px solid light-dark(#bbbbbb,#444444);
    border-radius: 10%;
    margin: 5px;
}

.form-container > .inner-form-container > form {
    padding: 35px;
}

.form-container .inner-form-container form p input {
    border-radius: 10px;
}

.form-container .inner-form-container form p textarea {
    border-radius: 10px;
    width: 90%;
    height: 250px;
}

.form-container .inner-form-container form button {
    margin-left: 90%;
}

.modal-content {
    background: light-dark(#e0e0e0, rgba(14, 21, 36));
    color: light-dark(black, wheat);
}

.post-container-modal > .carousel {
    width: 60%;
    margin-left: 20%;
    margin-right: 20%;
}

.date {
    display: flex;
    font-weight: bold;
}

.modal-title {
    margin-left: 45%;
}

#googlemap {
    margin-top: 5%;
    height: 640px;
    width: 75%;
}

@media (max-width: 1023px) {
    .left-chapter {
        display: none;
        width: 0%
    }

    .right-chapter {
        display: none;
        width: 0%
    }

    .content {
        width: 100%;
    }

    img {
        width: 105px;
        height: 105px;
    }

    .post-container {
        margin-top: 25px;
        margin-left: 25px;
        margin-right: 45px;
        padding-left: 0px;
        padding-right: 0px;
        border: 1px solid light-dark(#bbbbbb,#444444);
        font-size: small;
    }

    .form-container {
        display: none;
    }

    .post-container-modal > .text-content-modal {
        font-size: 56px;
    }

    .post-container-modal > .date {
        font-weight: bold;
        font-size: 56px;
    }

    .post-container-modal > .carousel {
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
}
}

@media (width: 1024px) {
    img {
        width: 230px;
        height: 230px;
    }

    .post-container {
        padding-left: 0px;
        padding-right: 0px;
        padding: 15px;
    }
}

.post-name {
    border-bottom: 2px dotted light-dark(#bbbbbb, #444444);
    color: light-dark(black, #E0E0E0);
}