.carousel-nav {
    position: relative;
    margin-top: 4rem;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: 1.5rem;
    justify-content: space-between;
    max-width: fit-content;
    max-width: 94vw;
}

.carousel-nav .button.white-on-blue {
    width: 4.5rem;
    height: 4.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem !important;
}

.carousel-nav .button.white-on-blue svg {
    min-width: 1.5rem;
    min-height: 1.5rem;
}

.carousel-nav .button.white-on-blue.right svg {
    transform: rotate(180deg);
}

.carousel-nav .arrows-and-dots {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: 1.5rem;
}

[data-role~=carousel-dots] svg circle {
    fill: var(--color-gray-light);
}

.carousel-nav .button.blue-on-white {
    align-self: flex-end;
    justify-self: flex-end;
}

.carousel-nav .button.blue-on-white:hover {
    background: var(--color-brand-navy);
}

.carousel-dots {
    display: flex;
    flex-flow: row wrap;
    gap: 1.2rem;
    margin-left: 2rem;
}

.carousel-dots > button.blue svg circle{
    fill: var(--color-brand-navy);
}

.carousel-nav .button.blue-on-white,
.carousel-dots button{
    background: none;
    padding-inline: 1rem;
}

@media screen and (max-width: 65em) {
    .carousel-nav{
        padding-left: var(--mobile-padding);
    }
}

@media screen and (max-width: 35em){
    .carousel-container .carousel-dots{
        margin-left: 0;
    }
}