
/* BREADCRUMB */
.breadcrumb {margin-top: 1.25rem; margin-bottom: 1rem;}
.breadcrumb li {display: inline-flex; align-items: center;}
.breadcrumb li:first-child::after {margin-inline: 0.5rem; content: '/'; color: var(--c-lite-text);}
.breadcrumb li a {color: var(--c-lite-text); font-size: var(--fs-2xs);}
.breadcrumb li a:hover {color: var(--c-primary);}
.breadcrumb li .active {color: var(--c-lite-text); font-size: var(--fs-2xs);}

/* ABOUT */
.about {padding-block: 1.87rem;}
.about .content > :first-child {font-size: var(--fs-xl); color: var(--c-lite-text); font-family: var(--ff-secondary); margin-bottom: 0.75rem;}
.about .content :where(ul, ol) {display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.92rem; margin-block: 1.87rem; padding-left: 0;}
.about .content li {color: var(--c-lite-text); position: relative; padding-left: 1.87rem; text-wrap: nowrap;}
.about .content li::before {position: absolute; inset: 0; width: 1.125rem; height: 1.125rem; background: no-repeat center/cover url('https://www.thedisplayboxes.com/theme/website/assets/images//icons/check-icon.png'); content: '';}
.about .wrapper {display: grid; grid-template-columns: minmax(450px, 620px) minmax(400px, 540px); gap: 1.25rem; margin-bottom: 1rem;}
.about .image {margin: auto;}
.about .paragraph :where(h2, h3, h4, h5, h6) {color: var(--c-lite-text); font-weight: 800; font-family: var(--ff-secondary); margin-bottom: 1.25rem;}
.about .paragraph h1 {font-size: calc(var(--fs-md, 35px) - 3px); color: var(--c-heading); margin-bottom: 2.5rem;}
.about .paragraph h2:nth-child(2) {font-family: var(--ff-primary); font-size: calc(var(--fs-md, 35px) - 3px); color: var(--c-heading);}
.about .paragraph h2 {font-size: calc(var(--fs-sm, 22px) + 2px);}
.about .paragraph h3 {font-size: var(--fs-sm, 22px);}
.about .paragraph h4 {font-size: calc(var(--fs-sm, 22px) - 2px);}
.about .paragraph h5 {font-size: calc(var(--fs-base, 16px) + 2px);}
.about .paragraph h6 {font-size: var(--fs-base, 16px);}
.about .paragraph p {color: var(--c-lite-text); line-height: 1.6; margin-bottom: 1.25rem;}
.about .paragraph p a {color: var(--c-primary); text-decoration: underline; display: inline-block;}
.about .paragraph p strong {font-weight: 800; color: var(--c-lite-text); font-size: var(--fs-base); display: block; margin-bottom: 1rem;}
.about .paragraph :where(ul, ol) {color: var(--c-lite-text); padding-left: 1.25rem; margin-bottom: 1rem;}
.about .paragraph li[data-list="bullet"] {list-style: disc;}
.about .paragraph li[data-list="ordered"] {list-style: decimal;}

/* MEDIA QUERIES */
@media only screen and (max-width: 1200px) {
    .about {padding-block: 0.625rem;}
}

@media only screen and (max-width: 991px) {
    .about .wrapper {grid-template-columns: 1fr; margin-bottom: 0.62rem;}
    .about .content {order: 2;}
    .about .image {order: 1;}
    .about .content :is(ul, ol) {margin-block: 0.5rem 1.875rem;}
}

@media only screen and (max-width: 575px) {
    .about .content :is(ul, ol) {margin-block: 0 1.25rem; grid-template-columns: 1fr;}
}