form{
    display: grid;
    grid-template-columns: 100%;
    justify-content: center;
    gap: 1rem;
}

form input::placeholder{
    font-size: var(--fs-bodytext);
}

input {
    width: 100%;
    height: 40px;
    border-radius: var(--rad-sm);
    outline: none;
    padding-left: 9px;
    border: 0.25px solid var(--co-border);
    font-size: var(--fs-subtext);

}

textarea{
    width: 100%;
    height: 40px;
    min-height: 40px;
    border-radius: var(--rad-sm);
    outline: none;
    padding-left: 9px;
    border: 0.25px solid var(--co-border);
    font-size: var(--fs-subtext);
}

select {
    width: 100%;
    outline: none;
    height: 40px;
    border-radius: var(--rad-sm);
    outline: none;
    padding-left: 9px;
    border: 0.25px solid var(--co-border);
    font-size: var(--fs-subtext);
}



/* main_form--2col */
.main__form--2col {
    display: grid;
    grid-template-columns: 20% 80%;
    align-items: center;
    gap: 8px;
    z-index: 2;
}

.form__label--2col {
    font-size: var(--fs-subtext);
    color: var(--co-primary);
    font-weight: 500;
}

.form_input--2col {
    font-size: var(--fs-subtext);
    border-radius: var(--rad-xs);
    height: 42px;
    background-color: var(--co-secondary);
    border: 1px solid var(--co-border);
}

.form_select--2col {
    font-size: var(--fs-subtext);
    border-radius: var(--rad-xs);
    height: 42px;
    background-color: var(--co-secondary);
    border: 1px solid var(--co-border);
    outline: none;
}

.form__item--2col label,
.form__item--image label {
    font-size: var(--fs-subtext);
}

.form__item--2col input,
.form__item--2col select,
.form__item--2col textarea,
.form__item--image input {
    font-size: var(--fs-subtext);
}


/* form__list */
.form__list {
    display: grid;
    grid-template-columns: 100%;
    gap: 8px;
}

.form__item--2col {
    display: grid;
    grid-template-columns: 20% 80%;
}


.form__item--image {
    display: grid;
    grid-template-columns: 20% auto;
}

.image-preview {
    width: 100px;
    background-color: var(--co-secondary);
    padding: 8px;
    border: 1px solid var(--co-border);
}

/* form__list p */
/* The p tag is a built-in Django tag from as_p. */
.form__list p {
    display: grid;
    grid-template-columns: 20% 80%;
}

.form__list p label,
.form__list p input,
.form__list p select,
.form__list p textarea {
    font-size: var(--fs-subtext);
}

#image-clear_id {
    height: 14px;
    width: 14px;
}

.error-validation {
    font-size: var(--fs-subtext);
    color: red;
}