/* Content tile grid (no carousel) */

.content-tile__grid {
    padding-inline: 30px;
    width: 100%;
}

.content-tile__grid .content-tile__list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

/* Content tile carousel */

.content-tile__arrows,
.content-tile__carousel {
    overflow: clip;
    padding: 0 calc(var(--gutter) - var(--grid-gutter) * 0.5);
    width: 100%;
}

@media screen and (width >= 1080px) {
    .content-tile__arrows,
    .content-tile__carousel {
        padding: 0 calc(var(--gutter) - 15px);
    }
}

.content-tile__carousel:not(.splide__main) .content-tile__list {
    flex-wrap: wrap;
}

.content-tile__track {
    overflow: visible;
}

@media screen and (width >= 500px) {
    .content-tile__track {
        overflow: clip;
    }
}

.content-tile__arrows {
    display: none;
    margin-bottom: 30px;
}

.content-tile__arrows .content-tile__arrow {
    display: inline;
    height: 54px;
    left: inherit;
    margin: 0 4px;
    position: relative;
    right: inherit;
    width: 54px;
}

.pagepart__content--is-aligned-center .content-tile__arrows {
    text-align: center;
}

.pagepart__content--is-aligned-center .content-tile__list:not(.splide__list) {
    justify-content: center;
}

.pagepart__content--is-aligned-right .content-tile__arrows {
    text-align: right;
}

.splide--draggable .content-tile__arrows {
    display: block;
}

/* Content tile */

.content-tile {
    display: flex;
    padding: 0 calc(var(--grid-gutter) * 0.5) 30px calc(var(--grid-gutter) * 0.5);
    width: 100%;
}

@media screen and (width >= 1080px) {
    .content-tile {
        padding-inline: 15px;
    }
}

@media screen and (width >= 500px) {
    .content-tile {
        width: 50%;
    }
}

@media screen and (width >= 768px) {
    :is(.content-tile--3-tiles, .content-tile--4-tiles, .content-tile--5-tiles) .content-tile {
        width: 33.3333333333%;
    }
}

@media screen and (width >= 1080px) {
    :is(.content-tile--4-tiles, .content-tile--5-tiles) .content-tile {
        width: 25%;
    }
}

@media screen and (width >= 1280px) {
    .content-tile--5-tiles .content-tile {
        width: 20%;
    }
}

.content-tile__content-wrapper {
    flex-grow: 1;
}

.content-tile__text {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    white-space: normal;
}

.content-tile__text > :last-child {
    margin-bottom: 0;
}

.content-tile__image,
.content-tile__video {
    height: 306px;
}

@media screen and (width >= 1080px) {
    .content-tile__image,
    .content-tile__video {
        height: 312px;
    }
}

/* Content tile theme colors */

.pagepart--theme-default .content-tile__content--theme-default {
    background: var(--color-navy);
}

.pagepart--theme-green .content-tile__content--theme-default {
    background: var(--color-green);
}

.pagepart--theme-yellow .content-tile__content--theme-default {
    background: var(--color-yellow);
}

.pagepart--theme-yellow .content-tile__content-wrapper,
.pagepart--theme-yellow .content-tile__title-heading {
    color: #000;
}

/* Content tile overrides */

.content-tile__title {
    align-items: flex-start;
    font-weight: 700;
}

.content-tile:first-of-type {
    padding-left: 3px;
}

.content-tile__content-wrapper {
    border-bottom-right-radius: 20px;
    overflow: hidden;
}

.content-tile__content-wrapper,
.content-tile__title-heading {
    color: var(--color-white);
}

.content-tile__arrows {
    text-align: right;
}

.splide__arrows--btn .splide__arrow {
    background: var(--color-navy);
}

.splide__arrows--btn .splide__arrow:hover {
    background: var(--color-navy-dark);
}

.splide__arrows--btn .splide__arrow--prev {
    left: -30px;
}

.splide__arrows--btn .splide__arrow--next {
    right: -30px;
}

.content-tile--appearance-below .content-tile__title {
    margin-top: 15px;
}

.content-tile__arrows .content-tile__arrow--prev {
    left: auto;
    margin-right: 6px;
}

.content-tile__arrows .content-tile__arrow--next {
    right: auto;
}

.pagepart_wrapper--has-footer .content-tile__arrows {
    bottom: -78px;
    position: absolute;
    right: 15px;
}

@media screen and (width >= 768px) {
    .pagepart_wrapper--has-footer .content-tile__arrows {
        bottom: -84px;
    }
}

/* ContentTilesPagePart section */

.pagepart_wrapper_type__ContentTilesPagePart {
    overflow: hidden;
}

.pagepart_wrapper_type__ContentTilesPagePart .pagepart__content {
    overflow: visible;
}

@media screen and (width >= 768px) {
    .pagepart_wrapper_type__ContentTilesPagePart .pagepart__content {
        order: 1;
        width: 100%;
    }
}

.pagepart_wrapper_type__ContentTilesPagePart .content-tile__carousel {
    padding-left: 30px;
    padding-right: 30px;
}

@media screen and (width >= 1280px) {
    .pagepart_wrapper_type__ContentTilesPagePart .container-wide {
        max-width: 1366px;
    }
}

.pagepart_wrapper_type__ContentTilesPagePart .pagepart__footer {
    text-align: left;
}

@media screen and (width >= 768px) {
    .pagepart_wrapper_type__ContentTilesPagePart .pagepart__footer {
        margin-bottom: 30px;
        margin-right: 141px;
        text-align: right;
    }

    .pagepart_wrapper_type__ContentTilesPagePart .pagepart__footer > .container-fluid {
        max-width: 100%;
    }
}

@media screen and (width >= 1268px) {
    .pagepart_wrapper_type__ContentTilesPagePart .pagepart__footer {
        margin-right: calc(50vw - 566px);
    }
}

.pagepart_wrapper_type__ContentTilesPagePart .pagepart__footer-btn {
    background: var(--color-red);
    color: var(--color-white);
}

.pagepart_wrapper_type__ContentTilesPagePart .pagepart__footer-btn:active,
.pagepart_wrapper_type__ContentTilesPagePart .pagepart__footer-btn:hover {
    background: var(--color-red-dark);
    color: var(--color-white);
}

.pagepart_wrapper_type__ContentTilesPagePart .pagepart__footer-btn {
    font-size: var(--fs-btn);
    padding: 9px 24px;
}

@media screen and (width >= 768px) {
    .pagepart_wrapper_type__ContentTilesPagePart .pagepart__footer-btn {
        font-size: var(--fs-body);
        padding: 12px 30px;
    }
}

@media screen and (width >= 1280px) {
    .pagepart_wrapper_type__ContentTilesPagePart .pagepart__footer-btn {
        margin-right: 45px;
    }
}

/* pp-content-tile layout for 4+ tiles */

.pp-content-tile:not(.pp-content-tile--has-2-tiles):not(.pp-content-tile--has-3-tiles) {
    display: flex;
    justify-content: flex-end;
    max-width: 100%;
}

.pp-content-tile:not(.pp-content-tile--has-2-tiles):not(.pp-content-tile--has-3-tiles) .content-tile__carousel.splide {
    margin-right: 0;
    max-width: calc(50vw + 634px + var(--grid-gutter) * 0.5);
    overflow: visible;
}

.pp-content-tile:not(.pp-content-tile--has-2-tiles):not(.pp-content-tile--has-3-tiles) .content-tile__carousel.splide .content-tile__track {
    overflow: visible;
}

.pp-content-tile:not(.pp-content-tile--has-2-tiles):not(.pp-content-tile--has-3-tiles) .content-tile__carousel[data-splide*=loop] {
    margin: 0 auto;
    max-width: 1313px;
    overflow: hidden;
}

/* Tiles base */

.tiles__wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
    overflow: clip;
    position: relative;
    width: 100%;
}

.tiles--txt {
    margin-block: 0;
    margin-inline: 20px;
}

@media screen and (width >= 1080px) {
    .tiles--txt {
        margin-inline: 36px;
    }
}

.link-overlay:first-child + .tiles--txt,
.tiles--txt:first-child {
    margin-top: 20px;
}

@media screen and (width >= 1080px) {
    .link-overlay:first-child + .tiles--txt,
    .tiles--txt:first-child {
        margin-top: 36px;
    }
}

.tiles--txt:last-child {
    margin-bottom: 20px;
}

@media screen and (width >= 1080px) {
    .tiles--txt:last-child {
        margin-bottom: 36px;
    }
}

.tiles__title {
    align-items: center;
    color: var(--color-navy);
    display: flex;
    font-size: var(--h4-fs);
    font-weight: 700;
    letter-spacing: 0;
    line-height: var(--h4-lh);
    max-height: calc(var(--h4-lh) * 3);
    min-height: calc(var(--h4-lh) * 1);
    overflow: hidden;
    position: relative;
    text-align: left;
}

.tiles__title-txt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    max-height: 100%;
}

.tiles__img {
    aspect-ratio: 16/9;
    min-height: 150px;
    order: -1;
}

/* Description date */

.description__date,
.description__date.tiles--txt {
    margin-bottom: 0;
}
