#opinions {

            padding-top: 6.25rem;

            padding-bottom: 6.25rem;
}

@media (max-width: 800px) {

            #opinions {

                        padding-bottom: 3.125rem;
            }
}

    #opinions .container {

            flex-wrap: wrap;

            gap: 2.5rem;

            padding-top: 3.75rem;

            padding-bottom: 3.75rem;
}

    @media (max-width: 800px) {

            #opinions .container {

                        padding-top: 2.5rem;

                        padding-bottom: 2.5rem;
            }
}

    @media (max-width: 600px) {

            #opinions .container {

                        flex-direction: column;
            }
}

    #opinions .container .tile {

            flex: 1 1 auto;

            flex-basis: 22rem;

            border-radius: 0.313rem;

            border-width: 1px;

            border-style: solid;

            border-color: rgba(138,133,121,0.2);

            padding: 2.5rem;

            padding-bottom: 9.563rem;
}

    @media (max-width: 800px) {

            #opinions .container .tile {

                        width: 100%;
            }
}

    #opinions .container .tile.is-hidden {

            display: none;
}

    #opinions .container .tile .header {

            gap: 1.25rem;
}

    #opinions .container .tile .header .number {

            font-size: 0.875rem;

            font-weight: 500;

            line-height: 1;
}

    #opinions .container .tile .header .number::after {

            margin-left: 0.25rem;

            display: inline-block;

            --tw-content: '/';

            content: var(--tw-content);
}

    #opinions .container .tile .header .number::before {

            margin-right: 0.25rem;

            display: inline-block;

            --tw-content: '/';

            content: var(--tw-content);
}

    #opinions .container .tile .opinion {

            margin-top: 2.5rem;

            margin-bottom: 2.5rem;

            font-size: 1.25rem;

            font-weight: 400;

            line-height: 1.4;
}

    #opinions .container .tile .opinion > *:first-child {

            margin-top: 0px;
}

    #opinions .container .tile .opinion > *:last-child {

            margin-bottom: 0px;
}

    #opinions .container .tile .author {

            left: 2.5rem;

            bottom: 2.5rem;

            right: 2.5rem;

            gap: 1.25rem;

            border-top-width: 1px;

            border-style: solid;

            border-color: rgba(138,133,121,0.2);

            padding-top: 2.5rem;

            font-size: 1rem;

            font-weight: 500;

            line-height: 1;
}

    #opinions .container .tile .author .name {

            margin-bottom: 0.625rem;
}

    #opinions .tags {

            gap: 0.625rem;

            overflow: hidden;
}

    @media (max-width: 1260px) {

            #opinions .tags {

                        flex-direction: column;

                        align-items: flex-start;
            }
}

    #opinions .tags > div:first-of-type {

            flex-wrap: nowrap;

            gap: 0.625rem;

            overflow-x: auto;
}

    @media (max-width: 1260px) {

            #opinions .tags > div:first-of-type {

                        padding-bottom: 0.25rem;
            }
}

    #opinions .tags > div:first-of-type {

            -webkit-overflow-scrolling: touch;
            scroll-snap-type: x mandatory;
        }

    #opinions .tags > div:first-of-type::-webkit-scrollbar {

            display: none;
}

    @media (hover: hover) and (pointer: fine) {
                #opinions .tags > div:first-of-type.native-scrollbar {
                    scrollbar-color: #E1C017 #ccc;
                    scrollbar-width: thin;
                }
                    #opinions .tags > div:first-of-type.webkit-scrollbar::-webkit-scrollbar {

                        display: block;

                        height: 0.5rem;
            }

                    #opinions .tags > div:first-of-type.webkit-scrollbar::-webkit-scrollbar-thumb {

                        border-radius: 9999px;

                        background-color: #E1C017;
            }

                    #opinions .tags > div:first-of-type.webkit-scrollbar::-webkit-scrollbar-track {

                        border-radius: 9999px;

                        background-color: #ccc;
            }
            }

    #opinions .tags > div:first-of-type [data-tag-filter] {

            flex-shrink: 0;

            cursor: pointer;

            border-radius: 9999px;

            border-width: 1px;

            border-style: solid;

            padding-top: 0.625rem;

            padding-bottom: 0.625rem;

            padding-left: 1rem;

            padding-right: 1rem;

            font-weight: 300;
                scroll-snap-align: start;
}

    #opinions .tags > div:first-of-type [data-tag-filter].active {

            border-color: #FDC300;

            background-color: #FDC300;
}

    #opinions .tags > div:first-of-type [data-tag-filter]:not(.active) {

            border-color: #0C0C0C;
}

    #opinions .tags > div:last-of-type {

            gap: 0.625rem;

            padding-top: 0.625rem;

            padding-bottom: 0.625rem;

            font-size: 0.875rem;

            font-weight: 300;

            line-height: 1;
}

    @media (max-width: 1260px) {

            #opinions .tags > div:last-of-type svg {

                        --tw-rotate: 90deg;

                        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
            }
}