.references {
    padding-block: 2.5rem;
    overflow: hidden;
}

@media (min-width: 48rem) {
    .references {
        padding-block: 5rem;
    }
}

.references__container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    display: flex;
    gap: 1.5rem;
    align-items: stretch;
}

.references__intro {
    flex: 0 0 27rem;
    background: var( --color-bg-darkest);
    border-radius: var(--radius-md);
    padding: 2.5rem 2.25rem;
    display: flex;
    flex-direction: column;
    color: var( --color-white );
}

.references__title {
    font-size: 1.625rem;
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
    color: var( --color-white );
    margin: 0 0 auto;
}

.references__google {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.references__google-logo {
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    grid-column: 1;
    grid-row: 1 / 3;
}

.references__google-rating {
    display: flex;
    gap: 0.1875rem;
    color: hsla(45, 100%, 50%, 1);
    font-size: 1.125rem;
}

.references__google-count {
    font-size: 0.875rem;
    opacity: 0.8;
    width: 100%;
    margin-top: 0.125rem;
}

.references__nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.references__pagination {
    display: flex;
    gap: 0.375rem;
    align-items: center;
    margin-right: auto;
}

.references__pagination .swiper-pagination-bullet {
    width: 0.625rem;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    opacity: 1;
    transition: background-color 0.2s;
}

.references__pagination .swiper-pagination-bullet-active {
    background: var( --color-white );
}

.references__nav-btn {
    width: 3.25rem;
    min-width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    border: 0.0625rem solid hsla(0, 0%, 100%, 0.35);
    background: var( --color-white );
    color: var( --color-text-heading );
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
    transition: background-color 0.2s, border-color 0.2s;
}

.references__nav-btn.swiper-button-disabled {
    opacity: 0.35;
    cursor: default;
}

.references__nav-btn:hover {
    background: transparent;
    border-color: var(--color-white);
    color: var( --color-white );
}

.references__nav-btn.swiper-button-disabled:hover {
    background: var( --color-white );
    border-color: var( --color-white );
    color: var( --color-text-heading );
}

.references__swiper {
    flex: 1;
    min-width: 0;
    overflow: visible;
    clip-path: inset(-20px -100vw -20px -20px);
    padding: 1.25rem 0 1.25rem 0px;
    margin: -1.25rem 0 -1.25rem 0px;
}

.references__swiper .swiper-slide {
    width: calc((var(--container-max-width) - 18.75rem - 3rem) / 2 - 3.75rem);
    height: auto;
}

.references__card {
    background: var( --color-white );
    border-radius: var(--radius-md);
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.08);
    padding: 2rem 1.75rem;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.references__card-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    margin: 0 0 0.75rem;
    color: var( --color-text-heading );
}

.references__card-quote {
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var( --color-text-body );
    margin: 0 0 1.25rem;
    flex: 1;
}

.references__card-footer {
    display: grid;
    grid-template-columns: 4rem 1fr;
    grid-template-rows: min-content min-content;
    align-items: center;
    justify-content: space-between;
    column-gap: 1.25rem;
}

.references__card-author {
    grid-column: 1;
    grid-row: 1 / 3;
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.references__card-avatar,
img.references__card-avatar {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    object-fit: cover;
}

.references__card-avatar--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: hsl(0, 0%, 91%);
    color: hsl(0, 0%, 60%);
    font-size: var(--font-size-base);
}

.references__card-name {
    grid-column: 2;
    grid-row: 1;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var( --color-text-heading );
}

.references__card-rating {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    gap: 0.125rem;
    color: hsl(45, 100%, 50%);
    font-size: var(--font-size-sm);
}

.references__card-star--empty {
    color: hsl(0, 0%, 87%);
}

@media ( max-width: 1340px ) {
    .references__container {
        margin-inline-start: 1.25rem;
    }
}

@media (max-width: 991px) {
    .references__container {
        flex-direction: column;
        margin-inline-start: 0;
    }

    .references__swiper {
        overflow: hidden;
        margin-inline-start: 1.25rem;
    }

    .references__intro {
        width: calc(100% - 2.5rem);
        margin: 0 auto;
        flex: none;
        padding: 2rem 1.5rem;
    }

    .references__swiper .swiper-slide {
        width: 18.75rem;
    }

    .references__nav {
        margin-top: 1.5rem;
    }
}

@media (max-width: 575px) {

    .references__swiper .swiper-slide {
        width: 16.25rem;
    }

    .references__card {
        padding: 1.5rem 1.25rem;
    }
}