.slide-gallery__gallery-wrapper {
    display: grid;
    margin-bottom: 2em;
    grid-template-columns: 56px 1fr 56px;
    grid-template-rows: auto;
    grid-template-areas:
        "image image image"
        "left slider right";
}

@media (min-width: 1200px), 
       (min-width: 600px) and (max-width: 812px) {
    .slide-gallery__gallery-wrapper {
        grid-template-columns: 150px 1fr 150px;
        margin-left: -150px;
        margin-right: -150px;
        grid-template-areas:
            "left image right"
            "slider slider slider";
    }
}

.slide-gallery__image-wrapper {
    grid-area: image;
    overflow: hidden;
}

.slide-gallery__image-container {
    display: flex;
}

.slide-gallery__image {
    display: block;
    min-width: 100%;
}

.slide-gallery__navi--right {
    grid-area: right;
}

.slide-gallery__navi--left {
    grid-area: left;
}

.slide-gallery__navi {
    display: flex;
    justify-content: center;
    align-items: center;
}

.slide-gallery__navi-item {
    background-repeat: no-repeat;
    background-color: inherit;
    background-position: center;
	color: inherit;
	border: none;
    -webkit-tap-highlight-color: transparent;
	padding: 0;
	font: inherit;
	outline: inherit;
    height: 100%;
    width: 100%;
    cursor: pointer;
}

.slide-gallery__navi-item--right {
    background-image: url('../Icons/arrow-right.svg');
}

.slide-gallery__navi-item--left {
    background-image: url('../Icons/arrow-left.svg');
}

.slide-gallery__slider {
    grid-area: slider;
    overflow: hidden;
    padding: 16px;
    max-width: fit-content;
    width: calc(100% - 10px);
    margin: auto;
}

.slide-gallery__slider-container {
    display: flex;
    gap: 4px;
}

.slide-gallery__slider-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 32px;
    width: 32px;
    cursor: pointer;
    flex-shrink: 0;
    background: none;
	color: inherit;
	border: none;
    -webkit-tap-highlight-color: transparent;
	padding: 0;
	font: inherit;
	outline: inherit;
}

.slide-gallery__slider-item:after {
    content: "";
    height: 5px;
    width: 5px;
    border-radius: 5px;
    background: #9c9891;
}

.slide-gallery__slider-item--active:after {
    content: "";
    height: 10px;
    width: 10px;
    border-radius: 10px;
    background: #0D0D0D;
}