Abrand T096

<style>
    : root {
        --gutter: 20px;
    }

    .stories {
        padding: var(--gutter) 0;
        display: grid;
        grid-gap: var(--gutter) 0;
        grid-template-columns: var(--gutter) 1fr var(--gutter);
        align-content: start;
        overflow-y: scroll;
        height: 105px;
    }

    .stories > * {
        grid-column: 2 / -2;
    }

    .stories > .full {
        grid-column: 1 / -1;
        padding-top: 5px;
    }

    .hs {
        display: grid;
        grid-gap: calc(var(--gutter) / 2);
        grid-template-columns: 10px;
        grid-template-rows: minmax(100px, 1fr);
        grid-auto-flow: column;
        grid-auto-columns: calc(50% - var(--gutter) * 2);

        overflow-x: scroll;
        scroll-snap-type: x proximity;
        padding-bottom: calc(0.75 * var(--gutter));
        margin-bottom: calc(-0.25 * var(--gutter));
    }

    .hs:before,
    .hs:after {
        content: "";
        width: 10px;
    }

    li.item {
        width: 65px;
        margin: 10px 12% 0px 12%;
        text-align: center;
        text-transform: uppercase;
        font-size: 10px;
    }

    li.item img {
        width: 60px;
        height: 60px;
        margin: 0 auto;
        margin-bottom: 10px;
    }

    .no-scrollbar {
        scrollbar-width: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }
    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }

    .home__area.home__area--banner {
        padding-bottom: 5px;
    }

    .img_stories_wrap {
        border-radius: 100px;
        width: 100%;
        position: relative;
        margin-bottom: 10px;
    }
    .img_stories {
        width: 100.5%;
        height: 65px;
        opacity: 0.95;
        background-repeat: no-repeat;
        background-size: cover;
        overflow: hidden;
        border-radius: 30px;
    }



</style>