.block-openingstijden2024 {
	--zebra-even:#fee4bf;
	--zebra-odd:#fccb8d;
	--zebra-head:#d8a049;
	
    max-width: 100% !important;
    overflow: hidden;

    container-name: block;
    container-type: inline-size;

    .jacco-label-container {
        text-align: center;

        .jacco-label {
            display: inline-flex;
            width: auto;
        }

        [class*="col-"] .jacco-label {
            width: 100%;
        }
    }


    .label {
        font-size: inherit;
        margin-block: .1em;
    }

    .extra-title {
        font-style: italic;
    }


    nav {
        display: none;
    }
    .table-striped {
		& > thead > tr {
			background-color:var(--zebra-even);
			& > * {
				border-bottom: 1px solid var(--zebra-head);
			}
			&:first-child > * {
				border-top: 1px solid var(--zebra-head);
			}
		}
		& > tbody > tr:not([style]) {
			& > * {
				border-block:0;
			}
			&:nth-child(even) {
				background-color:var(--zebra-even);
			}
			&:nth-child(odd) {
				background-color:var(--zebra-odd);
			}
		}
	}

    .js & {
        .openingstijden-slider {
            display: flex;
            --i: 0;
            --n: 1;
            width: calc(100cqw * var(--n));
            transform: translateX(calc((100% / var(--n)) * var(--i) * -1));
            transition: transform 0.5s ease-in-out;
        }

        .openingstijden-slide {
            width: 100cqw;


            @media (min-width: 768px) {
                .table {
                    width: auto;
                    margin: 0 auto;
                }
            }
        }

        nav {
            display: block;
        }
    }

    @media (max-width: 767px) {
        figcaption {
            text-align: center;
        }

        .table {
            thead {
                display: none;
            }

            .fa {
                position: static;
                margin: 0;
            }

            tr, th, td {
                display: block;
                border: 0;
                text-align: center;
                padding-block: 0;
                align-content: center;
                font-size: 1rem;
            }

            tr {
                padding-block: .5em;
            }

            th {
                padding-bottom: 1em;
            }

            small {
                font-size: inherit;
            }

            [data-mobile-name] {
                display: flex;
                justify-content: flex-start;

                > * {
                    align-self: center;
                }

                &::before {
                    display: inline-block;
                    padding-right: .35em;
                    margin-right: .35em;
                    content: attr(data-mobile-name) ': ';
                    /*font-weight: 700;*/
                    text-align: right;
                    width: 50%;

                }
                @media (max-width: 374px) {
                    flex-direction: column;
                    &::before {
                        text-align: center;
                        display: block;
                        width: auto;
                        padding: 0;
                        margin: 0;
                    }
                }
            }
        }
    }
}