/* featured-page, featured-custom, featured-page-slider */

.featured-page-label {
    height: 2.625rem;
    padding-left: 1rem;
    padding-right: 1rem;
    display: flex;
    align-items: center;
    max-width: 100%;
}

.featured-page-label a {
    min-width: 0;
    overflow: hidden;
}

.featured-page-label h2 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

@media (max-width: 767.98px) {
    .featured-page-label {
        width: 100%;
    }

    .featured-page-label a {
        width: 100%;
        justify-content: space-between;
    }
}

/* grid layout */

.grid-col > .row {
    flex-grow: 1;
}

.grid-col > .row > .col-12 {
    flex: 1;
}

/* team block */

.team-image {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.grid-col .team-image {
    aspect-ratio: auto;
    flex: 1;
    min-height: 0;
}

.grid-col .position-relative > img.img-fluid {
    height: 100%;
    object-fit: cover;
}

/* writer / markdown blocks */

[class*="col"] > p:last-child,
[class*="col"] > div > p:last-child {
    margin-bottom: 0;
}

ul:not([class]) {
    list-style: none;
    padding-left: 1.5em;
}

ul:not([class]) > li {
    position: relative;
}

ul:not([class]) > li::before {
    content: '';
    position: absolute;
    left: -1.5em;
    top: 0.25em;
    width: 0.75em;
    height: 0.75em;
    background-image: var(--msp-arrow-right);
    background-repeat: no-repeat;
    background-size: contain;
}

/* certificate / award blocks */

.mks-certificate + .mks-certificate {
    margin-top: var(--bs-gutter-x, 2rem);
}

.mks-cert-logos {
    display: flex;
    flex-direction: column;
}

@media (max-width: 991.98px) {
    .mks-cert-logos {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 2rem;
        scrollbar-width: thin;
        scrollbar-color: #000 transparent;
    }

    .mks-cert-logos::-webkit-scrollbar {
        height: 4px;
    }

    .mks-cert-logos::-webkit-scrollbar-thumb {
        background-color: #000;
    }

    .mks-cert-logos::-webkit-scrollbar-track {
        background: transparent;
    }

    .mks-cert-logos > img {
        flex: 0 0 auto;
        height: 160px;
        width: auto;
    }
}

/* featured-page-slider block */

.mks-fp-slider {
    display: flex;
    overflow-x: auto;
    gap: var(--bs-gutter-x, 1.5rem);
    padding-bottom: 2rem;
    scrollbar-width: thin;
    scrollbar-color: #000 transparent;
}

.mks-fp-slider::-webkit-scrollbar {
    height: 4px;
}

.mks-fp-slider::-webkit-scrollbar-thumb {
    background-color: #000;
}

.mks-fp-slider::-webkit-scrollbar-track {
    background: transparent;
}

.mks-fp-slider-item {
    flex: 1 0 calc(25% - 1.125rem);
    min-width: 160px;
}

@media (max-width: 767.98px) {
    .mks-fp-slider {
        scroll-snap-type: x mandatory;
    }

    .mks-fp-slider-item {
        flex: 0 0 calc(50% - 0.75rem);
        scroll-snap-align: start;
    }
}

@media (max-width: 575.98px) {
    .mks-fp-slider-item {
        flex-basis: 80%;
    }
}

/* news block */

.mks-news-image-col {
    display: flex;
    flex-direction: column;
}

.mks-news-image-col > div,
.mks-news-image-col > .carousel {
    flex: 1;
    min-height: 0;
}

.mks-news-image-col .carousel-inner,
.mks-news-image-col .carousel-item {
    height: 100%;
}

.mks-news + .mks-news {
    margin-top: var(--bs-gutter-x, 2rem);
}

/* image-breaker block */

.mks-image-breaker {
    --mks-ih: 50vh;
    display: flex;
    overflow-x: auto;
    gap: 2rem;
    align-items: flex-start;
    padding-bottom: 2rem;
    scrollbar-width: thin;
    scrollbar-color: #000 transparent;
}

.mks-image-breaker::-webkit-scrollbar {
    height: 4px;
}

.mks-image-breaker::-webkit-scrollbar-thumb {
    background-color: #000;
}

.mks-image-breaker::-webkit-scrollbar-track {
    background: transparent;
}

.mks-image-breaker img {
    height: var(--mks-ih);
    width: auto;
    flex-shrink: 0;
    display: block;
}

@media (max-width: 767.98px) {
    .mks-image-breaker {
        flex-direction: column;
        overflow-x: visible;
        width: 100vw;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }

    .mks-image-breaker img {
        width: 100%;
        height: auto;
    }
}