.mycarousel {
    all: unset;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    width: 100%;
}

.pictureArea {
    grid-area: 1/1/-1/-1;
}
.pictureArea img {
    width:100%;
    height:200px;
}
.mycarousel-item {
    flex: 0 0 auto;
    width: 10px;
    scroll-snap-align: start;
}


.prev {
    grid-area: 2/1/3/2;
    background: none !important;
    align-self: center;
    z-index: 1;
    border:none;
}

.next {
    grid-area: 2/1/3/4;
    justify-self: end;
    align-self: center;
    z-index: 999;
}
.carousel-button {
    z-index: 2;
    cursor: pointer;
}

    .mycarousel-button button {
        background: none;
        border: none
    }

    .mycarousel-button:hover,
    .mycarousel-button:focus {
        color: red;
        background-color: rgba(0,0,0, .2);
    }

    .mycarousel-button:focus {
        outline: 1px solid black;
    }

.sliderContainer{
    display : flex;
    gap:0.5rem;
    overflow:hidden;
}

@media (min-width: 480px) {
    .pictureArea img {
        height: 300px;
    }

    @media (min-width: 1150px) {
        .pictureArea img {
            height: 400px;
        }
    }
}
/* Defining the utility class in your CSS */
@layer utilities {
    .reset-styles {
        all: unset;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        display: block;
        border: none;
        background: none;
    }
}