/* BREADCRUMB */
.breadcrumb {background-color: #f5f5f5; padding-block: 8px; --_c-grey-600: #626568;}
.breadcrumb li {display: inline-flex; align-items: center;}
.breadcrumb li:not(:last-child)::after {margin-inline: 8px; content: '/';}
.breadcrumb li a {color: var(--c-tertiary);}
.breadcrumb li a:hover {color: var(--c-primary);}
.breadcrumb li a svg {margin-right: 3px;}
.breadcrumb li .active {color: var(--_c-grey-600);}
.breadcrumb * {transition: var(--transition);}

/* FEEDBACK */
.feedback {padding-block: 20px 40px; --_fs-xl: calc(var(--fs-xl, 36px) + 6px); --_c-light-200: #ccc; --_c-light-400: #a1a1a1; --_c-dark-600: #616161;}
.feedback .head {text-align: center; margin-bottom: 40px;}
.feedback .head > :first-child {font-size: var(--_fs-xl); margin-bottom: 8px;}
.feedback .head p {font-size: calc(var(--fs-sm, 18px) + 2px);}
.feedback form {max-width: 580px; padding: 20px; border: 1px solid var(--_c-light-400); border-radius: 6px; margin-inline: auto;}
.feedback form .group {display: flex; align-items: center; gap: 30px;}
.feedback form .group > * {width: 50%;}
.feedback form label {display: block; font-weight: 700; color: var(--_c-dark-600); margin-block: 10px;}
.feedback form :where(input:not([type="radio"]), textarea) {width: 100%; padding: 15px 10px; border: 1px solid var(--_c-light-200); border-radius: 4px;}
.feedback form textarea {height: 80px; margin-bottom: 20px; resize: vertical;}
.feedback form > ul > li {display: flex; align-items: center; gap: 10px;}
.feedback form > ul > li li {display: inline-flex;}
.feedback form button[type="submit"] {display: block; width: 164px; height: 55px; font-size: var(--fs-sm, 18px); font-weight: 700; border-radius: 4px; margin-left: auto;}
:where(.feedback, .feedback :where(.head, .head *, form, form *)) {transition: var(--transition);}

/* Media Queries */
@media only screen and (max-width: 475px) {
    .feedback .head {margin-bottom: 20px;}
    .feedback .head p {font-size: var(--fs-base, 16px);}
    .feedback .head > :first-child {font-size: 26px;}
    .feedback form {padding: 15px;}
    .feedback form .group {flex-direction: column; align-items: flex-start; gap: 0;}
    .feedback form .group > * {width: 100%;}
    .feedback form label {margin-block: 6px;}
    .feedback form :where(input:not([type="radio"]), textarea) {padding: 10px;}
    .feedback form button[type="submit"] {width: 130px; height: 45px;}
}