.logo-gallery-block-component {
    display: flex;
    flex-direction: column;
    padding: var(--spacing-7xl) var(--spacing-xl);
    gap: var(--spacing-7xl);
    @media (min-width: 768px) {
        padding: var(--spacing-9xl) var(--spacing-4xl);
    }
    @media (min-width: 991px) {
        padding: var(--spacing-9xl) var(--spacing-8xl);
    }
}
.logo-gallery-block-component.light {
    background-color: var(--color-white);
}
.logo-gallery-block-component.dark {
    background-color: #161B26;
}
.logo-gallery-block-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5xl);
    @media (min-width: 768px) {
        gap: var(--spacing-7xl);
    }
}
.logo-gallery-block-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--spacing-none);
    gap: var(--spacing-4xl);
    @media (min-width: 991px) {
        padding: var(--spacing-none) var(--spacing-4xl);
        max-width: var(--container-max-width-desktop);
        margin: 0 auto;
    }
}
.logo-gallery-block-icons {
    display: flex;
    align-items: end;
    align-self: center;
    width: fit-content;
    gap: var(--spacing-lg);
}
.logo-gallery-block-icon {
    [lang="ar"] & {transform: scaleX(-1)}
    @media (min-width: 991px) {
        gap: var(--spacing-md);
    }
    .block-icon {
        .dark & {filter: brightness(0) saturate(100%) invert(93%) sepia(8%) saturate(106%) hue-rotate(202deg) brightness(91%) contrast(88%);}
    }
    .block-icon-size-24 {
        width: 24px;
        height: 24px;
    }
    .block-icon-size-48 {
        width: 48px;
        height: 48px;
    }
    .block-icon-size-96 {
        width: 96px;
        height: 96px;
    }
}
.logo-gallery-block-header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
    @media (min-width: 768px) {
        gap: var(--spacing-lg);
    }
    @media (min-width: 991px) {
        gap: var(--spacing-2xl);
    }
}
.logo-gallery-block-header-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
    @media (min-width: 768px) {
        gap: var(--spacing-lg);
    }
    @media (min-width: 991px) {
        gap: var(--spacing-2xl);
    }
}
.logo-gallery-block-text {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    @media (min-width: 768px) {
        gap: var(--spacing-lg);
    }
}
.logo-gallery-detail-eyebrow {
    letter-spacing: 0.0125em;
    font: var(--english-text-sm-semibold);
    [lang="ar"] & {font: var(--arabic-text-sm-semibold);}
    color: var(--color-teal-700);
    .dark & {color: var(--color-gray-dark-700-dark);}
    @media (min-width: 768px) {
        font: var(--english-text-md-semibold);
        [lang="ar"] &s {font: var(--arabic-text-md-semibold);}
    }
}
.logo-gallery-detail-title {
    color: var(--text-primary);
    .dark & {color: var(--color-gray-900-dark);}
    font: var(--english-display-sm-semibold);
    [lang="ar"] & {font: var(--arabic-display-sm-semibold);}
    font-size: 30px;
    line-height: 38px;
    margin-bottom: 0;
    @media (min-width: 768px) {
        font: var(--english-display-lg-semibold);
        [lang="ar"] & {font: var(--arabic-display-lg-semibold);}
    }
}
.logo-gallery-detail-subtitle {
    color: var(--color-gray-700);
    .dark & {color: #F5F5F6;}
    letter-spacing: 0.03em;
    margin-bottom: 0;
    font: var(--english-text-md-regular);
    [lang="ar"] & {
        font: var(--arabic-text-md-regular);
        letter-spacing: 0em;
    }
    @media (min-width: 768px) {
        font: var(--english-text-lg-regular);
        [lang="ar"] & {
            font: var(--arabic-text-lg-regular);
            letter-spacing: 0em;
        }
    }
}
.logo-gallery-block-buttons {
    display: flex;
    flex-direction: column;
    width: fit-content;
    gap: var(--spacing-2xl);
    align-self: center;
    align-items: center;
    @media (min-width: 768px) {
        flex-direction: row;
    }
    @media (min-width: 991px) {
        gap: var(--spacing-2xl);
    }
}
.logo-gallery-slider-container {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    width: 100%;
    @media (min-width: 991px) {
        max-width: var(--container-max-width-desktop);
        padding: var(--spacing-none) var(--spacing-4xl);
        gap: var(--spacing-3xl);
    }
}
.logo-gallery-slider-content {
    display: flex;
    gap: var(--spacing-xl);
    justify-content: center;
    @media (min-width: 768px) {
        gap: var(--spacing-4xl);
    }
    .slick-track {
        @media (min-width: 991px) {
            width: max-content !important;
            left: -16px; !important;
        }
    }
    .slick-slide {
        @media (min-width: 991px) {
            width: 176px !important;
            margin: 0 16px;
        }
    }
}
.logo-gallery-slider-content.no-sliding .slick-track {
    @media (min-width: 991px) {
        width: 100% !important;
        margin: 0 auto;
        left: 0 !important;
        display: flex;
    }
}
.logo-gallery-slider-controller {
    display: none;
    @media (min-width: 768px) {
        display: block;
    }
    height: 32px;
    .play::after, .pause::after {
      content: none;
      mask-image: none;
      -webkit-mask-image: none;
      background: none;
    }
    .play, .pause {
        right: 32px;
        bottom: 0;
        [lang="ar"] & {
            left: 32px;
            right: auto;
        }
    }
    .icon {
        color: #344054;
        .dark & {
            color: #CECFD2;
        }
        [lang="ar"] & {
            transform: scaleX(-1);
        }
    }
}
.logo-gallery-element-container {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--spacing-xs);
    justify-content: center;
    width: calc((100% - 16px) / 2);
    @media (min-width: 768px) {
        gap: var(--spacing-md);
        width: calc((100% - 64px) / 3);
    }
    .logo-gallery-element {
        aspect-ratio: 1/1;
        height: 100%;
        align-items: stretch;
        .logo-gallery-element-img {
            max-width: calc((100vw - 16px) / 2);
            width: 100%;
            height: 100%;
            max-height: 100%;
            object-fit: cover;
            object-position: center;
            @media (min-width: 768px) {
                max-width: calc((100vw - 64px) / 3);
            }
        }
    }
    .logo-gallery-media {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
        text-align: center;
    }
    .logo-gallery-media-caption {
        color: #475467;
        .dark & {color: #94969C;}
        margin-bottom: 0;
        font: var(--english-text-sm-regular);
        [lang="ar"] & {
            font: var(--arabic-text-sm-regular);
        }
    }
    .logo-gallery-media-title {
        text-align: center;
        color: #101828;
        .dark & {color: #F5F5F6;}
        margin-bottom: 0;
        font: var(--english-text-md-regular);
        [lang="ar"] & {
            font: var(--arabic-text-md-regular);
        }
    }
}