.wp-block-tabs {
margin-top: 4em;
margin-bottom: 4em;
}
.wp-block-tabs h2 {
margin-top: 0;
margin-bottom: 0.25em;
} .wp-block-tabs .wp-block-tabs__tabs-header {
display: flex;
gap: 1.5em;
margin: 0;
padding: 0;
position: relative;
}
.wp-block-tabs .wp-block-tabs__tabs-header li {
aspect-ratio: 1 / 1;
background-color: #001F59;
color: #FFFFFF;
display: block;
flex: 1;
max-height: 16em;
position: relative;
text-align: center;
}
.wp-block-tabs .wp-block-tabs__tabs-header li:hover {
background-color: #001336;
}
.wp-block-tabs .wp-block-tabs__tabs-header li.ui-state-active {
background-color: #FFD100;
color: #001F59;
}
.wp-block-tabs .wp-block-tabs__tabs-header li.ui-state-active::after {
background-color: #FFD100;
content: '';
height: 1.5em;
position: absolute;
right: 0;
bottom: 0;
transform: translateY(100%);
width: 100%;
}
.wp-block-tabs .wp-block-tabs__tabs-header a {
display: flex;
flex-direction: column;
gap: 1em;
justify-content: center;
align-items: center;
height: 100%;
text-decoration: none;
width: 100%;
}
.wp-block-tabs .wp-block-tabs__tabs-header h4 {
color: #FFFFFF;
margin: 0;
}
.wp-block-tabs .wp-block-tabs__tabs-header i {
color: #FFFFFF;
font-size: 4em;
}
.wp-block-tabs .wp-block-tabs__tabs-header li.ui-state-active h4,
.wp-block-tabs .wp-block-tabs__tabs-header li.ui-state-active i {
color: #001F59;
} .wp-block-tabs .wp-block-tabs__panel {
background-color: #FFD100;
box-sizing: border-box;
clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
display: flex;
align-items: center;
gap: 3em;
margin-top: 1.5em;
max-width: calc(((100% - 1em) / var(--kmt-tabs-count)) * round(up, calc(var(--kmt-tabs-count) / 2), 1));
padding: 1.5em;
}
.wp-block-tabs .wp-block-tabs__panel > div:first-child {
flex: 1;
}
.wp-block-tabs .wp-block-tabs__panel > div:last-child {
flex: 2;
}
.wp-block-tabs .wp-block-tabs__panel img {
border-radius: 4px;
}
.wp-block-tabs .wp-block-tabs__panel video {
border-radius: 4px;
}
.wp-block-tabs .wp-block-tabs__panel h3 {
margin: 0;
}
@media (max-width: 992px) {
.wp-block-tabs .wp-block-tabs__tabs-header {
gap: 0;
overflow: scroll;
}
.wp-block-tabs .wp-block-tabs__tabs-header li {
aspect-ratio: initial;
background-color: initial;
flex: initial;
}
.wp-block-tabs .wp-block-tabs__tabs-header li > a {
border-bottom: 1px solid #00000029;
box-sizing: border-box;
padding: 0.75em;
}
.wp-block-tabs .wp-block-tabs__tabs-header li:first-child > a {
padding-left: 0;
}
.wp-block-tabs .wp-block-tabs__tabs-header li:last-child > a {
padding-right: 0;
}
.wp-block-tabs .wp-block-tabs__tabs-header li.ui-state-active {
background-color: initial;
}
.wp-block-tabs .wp-block-tabs__tabs-header h4 {
color: #58554F;
font-family: 'Open Sans';
font-size: 1em;
white-space: nowrap;
}
.wp-block-tabs .wp-block-tabs__tabs-header i {
display: none;
}
.wp-block-tabs .wp-block-tabs__tabs-header li.ui-state-active::after {
height: 4px;
transform: translateY(0);
}
.wp-block-tabs .wp-block-tabs__panel {
background-color: initial;
gap: 1.5em;
margin-left: 0 !important;
margin-right: 0 !important;
max-width: 100%;
padding: 0;
}
}
@media (max-width: 576px) {
.wp-block-tabs .wp-block-tabs__panel {
display: block;
}
.wp-block-tabs .wp-block-tabs__panel h3 {
margin-top: 0.5em;
}
} .wp-site-blocks:not(.block-editor-block-list__layout) .wp-block-tabs h2 {
opacity: 0;
}
.wp-site-blocks:not(.block-editor-block-list__layout) .wp-block-tabs .wp-block-tabs__tabs-header li {
transform: scale(0);
}