.earth-charter-direct {
    padding: 5rem 5rem 11rem;
    position: relative;
}

.earth-charter-direct h2 {
    margin-top: 0;
    margin-bottom: 1.4rem;
}

.earth-charter-direct h4 {
    margin-top: 4.5rem;
}

.earth-charter-direct span.number {
    text-transform: uppercase;
    color: white;
    background-color: black;
    border-radius: 50%;
    width: 2.3rem;
    height: 2.3rem;
    line-height: 2.3rem;
    text-align: center;
    font-size: 1.45rem;
    margin-right: .75rem;
    display: inline-block;
    padding-top: .15rem;
    transform: translateY(.15rem);
}

.earth-charter-direct h4.no-number {
    height: 2.3rem;
    line-height: 2.3rem;
    padding-top: .15rem;
}

.earth-charter-direct a.button {
    float: right;
}

.earth-charter-swiper {
    max-width: 73.33vw;
    margin-left: 0;
    overflow: visible;
    position: static;
}

.earth-charter-swiper-mobile {
    margin-left: 0;
    overflow: visible;
    position: static;
}

.earth-charter-direct .tiles.grid {
    grid-template-columns: repeat(4, 1fr);
}

.earth-charter-direct .tiles.grid a {
    height: 23.4vw;
    margin-right: 2.1rem;
    box-shadow: .25rem .25rem 1rem rgba(0,0,0,.15);
    border-radius: 1.5rem;
    transition: .3s all;
    background-size:contain;
    background-position: center;
    background-repeat: no-repeat;
}

.earth-charter-direct .tiles.grid a:hover {
    transform: scale(1.11);
}

.purple .tiles.grid a {
    background-color: #796FCC;
}

.yellow .tiles.grid a {
    background-color: #FFD800;
}

.red .tiles.grid a {
    background-color: #FF5F66;
}

.blue .tiles.grid a {
    background-color: #00BFFC;
}

.earth-charter-direct .swiper-button-prev {
    width: 50vw;
    height: 8rem;
    left: 0;
    bottom: 0;
    top: unset;
    background-image: url(/wp-content/assets/img/arrow-prev-b.svg);
    background-size: .8rem 1.5rem;
    transition: .2s all;
}

.earth-charter-direct .swiper-button-next {
    width: 50vw;
    height: 8rem;
    right: 0;
    bottom: 0;
    top: unset;
    background-image: url(/wp-content/assets/img/arrow-next-b.svg);
    background-size: .8rem 1.5rem;
    transition: .2s all;
}

.earth-charter-direct .swiper-button-next:hover, .earth-charter-direct .swiper-button-prev:hover {
    background-color: #F8F8F8;
}

.earth-charter-direct .swiper-button-next.swiper-button-disabled, .earth-charter-direct  .swiper-button-prev.swiper-button-disabled {
    opacity: .2;
}

.swiper-container-horizontal>.swiper-scrollbar {
    width: 7.5rem;
    border-radius: 4px;
    background: #DBDBDB;
    left: 50%;
    bottom: 3.9rem;
    transform: translate(-50%, 50%);
    height: 4px;
}

.swiper-scrollbar-drag {
    background: #005CC8;
    border-radius: 4px;
}

.swiper-slide {
    width: 100%;
}

.swiper-slide.preamble, .swiper-slide.way-forward {
    width: 25%;
}

.swiper-slide.preamble .tiles.grid, .swiper-slide.way-forward .tiles.grid {
    grid-template-columns: none;
}

.preamble .tiles.grid a {
    background-color: #FFD800;
    background-color: #00BFFC;
}

.way-forward .tiles.grid a {
    background-color: #00BFFC;
    background-color: #FFD800;
}