.comment-container {
    display: flex;
    flex-direction: row;
    border: solid 1px rgba(100,100,100,0.1);
    padding: 10px;
    gap: 4%;
    margin-bottom: 25px;
}

.comment-text-container {
    flex:0 1 48%;
    width: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.comment-text-container .heading {
    display: flex;
    font-size: var(--font-size-1);
    font-family: var(--secondary-font-family);
    color: var(--primary-font-color);
    text-align: center;
    flex: 1;
    padding: 0;
    margin: 0;
    justify-content: center;
    align-items: flex-end;
    height: 100%;
}

.comment-text-container .content {
    display: flex;
    font-size: var(--font-size-3);
    font-family: var(--primary-font-family);
    color: var(--primary-font-color);
    text-align: center;
    flex: 2;
    padding: 0;
    margin: 0;
    justify-content: flex-start;
}

.comment-form-container {
    flex:0 1 48%;
    width: 100%;
    padding: 0;
    margin: 0;
}

.comment-form-container form {
    width: 100%;
}

.comment-form-container label {
    font-size: var(--font-size-3);
    font-family: var(--primary-font-family);
    color: var(--primary-font-color);
    font-weight: bold;
}

.comment-form-container input {
    padding: 5px;
    margin: 0;
    height: 35px;
    width: 100%;
    margin-bottom: 10px;
    font-size: var(--font-size-4);
    font-family: var(--primary-font-family);
    color: var(--primary-font-color);   
}

.comment-form-container textarea {
    height: 100px;
    resize: none;
    margin-bottom: 10px;
    font-size: var(--font-size-4);
    font-family: var(--primary-font-family);
    color: var(--primary-font-color);
}

.comment-form-container button {
    height: 30px;
    font-size: var(--font-size-3);
    font-family: var(--primary-font-family);
    color: var(--primary-font-color);
}

@media (max-width: 1259px) {
    .comment-container {
        flex-direction: column;
    }
}