.wp-block-vagabond-plus-tabs-smooth { overflow: hidden;
}
.wp-block.wp-block-vagabond-plus-tabs-smooth {
display: block;
}
.wp-block-vagabond-plus-tabs-smooth.instant-transition {
display: flex;
flex-direction: row-reverse;
border-bottom: 1px solid;
padding-top: 3rem;
} .wp-block-vagabond-plus-tabs-smooth .tabs-header {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 1rem;
}
.wp-block-vagabond-plus-tabs-smooth .tabs-header img {
cursor: pointer;
}
.wp-block-vagabond-plus-tabs-smooth.instant-transition .tabs-header .image-div {
flex: 1;
transition:
flex 0.3s ease,
transform 0.3s ease;
cursor: pointer;
overflow: hidden;
position: relative;
aspect-ratio: 1 / 1;
flex: 1 0 21%;
}
.wp-block-vagabond-plus-tabs-smooth.instant-transition
.tabs-header
.image-div
img {
width: 100%;
height: 75%;
-o-object-fit: cover;
object-fit: cover;
transition: transform 0.3s ease;
}
.wp-block-vagabond-plus-tabs-smooth.instant-transition
.tabs-header
.image-div.active {  transform: scale(1.15);
flex: 75.1; }
.wp-block-vagabond-plus-tabs-smooth.instant-transition
.tabs-header
.image-div.shrink {   transform: scale(0.75);
flex: 23.75; }
.wp-block-vagabond-plus-tabs-smooth.instant-transition .tabs-header { display: flex;
justify-content: center;
align-items: stretch; gap: 14px;
flex-grow: 1;
flex-basis: 0;
}
.wp-block-vagabond-plus-tabs-smooth.instant-transition .tabs-container {
flex-grow: 1;
flex-basis: 0;
overflow: hidden;
}
.wp-block-vagabond-plus-tabs-smooth .tabs-header button {
cursor: pointer;
padding: 0.5em 1rem;
border: none;
background: white;
transition: background 0.3s ease;
}
.wp-block-vagabond-plus-tabs-smooth .tabs-header button.active {
border: 1px solid var(--wp--preset--color--va-black);
}
.wp-block-vagabond-plus-tabs-smooth .tabs-content {
--n: 3; display: flex;
align-items: flex-start;
overflow-y: hidden;
width: 100%;
width: calc(var(--n) * 100%);  transform: translate(calc(var(--tx, 0px) + var(--i, 0) / var(--n) * -100%));
cursor: pointer;
}
.wp-block.wp-block-vagabond-plus-tabs-smooth .tabs-content,
.wp-block-vagabond-plus-tabs-smooth.instant-transition .tabs-content,
.wp-block-vagabond-plus-tabs-smooth.instant-transition .tabs-header .image-div,
.wp-block-vagabond-plus-tabs-smooth.instant-transition .tabs-header img {
cursor: pointer;
}
.wp-block-vagabond-plus-tabs-smooth .tabs-content:active {
cursor: grabbing;
cursor: grabbing;
}
.wp-block.wp-block-vagabond-plus-tabs-smooth .tabs-content {
flex-direction: column;
}
.wp-block-vagabond-plus-tabs-smooth .tabs-content > div {
width: 100%;
width: calc(100% / var(--n)); -webkit-user-select: none;
-moz-user-select: none;
user-select: none;
padding: 0 30px; }
.wp-block.wp-block-vagabond-plus-tabs-smooth .tabs-content.smooth {
transition: transform calc(var(--f, 1) * 0.5s) ease-out;
}
.wp-block.wp-block-vagabond-plus-tabs-smooth.instant-transition
.tabs-content.smooth {
transform: none;
}
.wp-block.wp-block-vagabond-plus-tabs-smooth .tabs-content > div {
pointer-events: all;
}
.wp-block-vagabond-plus-tabs-smooth .indicators {
display: flex;
gap: 1rem;
text-align: center;
font-size: 1.5rem;
justify-items: center;
position: relative;
width: -moz-fit-content;
width: fit-content;
margin-top: 1rem;
padding-left: 30px;
} .wp-block-vagabond-plus-tabs-smooth .tabs-container::before,
.wp-block-vagabond-plus-tabs-smooth .tabs-container::after {
position: absolute;
top: 50%;
font-size: 24px;
color: #333; transform: translateY(-50%) scaleY(2);
opacity: 0.4;
}
.wp-block-vagabond-plus-tabs-smooth .tabs-container.hide-indicators::before,
.wp-block-vagabond-plus-tabs-smooth .tabs-container.hide-indicators::after {
display: none;
}
.wp-block-vagabond-plus-tabs-smooth .tabs-container .prev-btn,
.wp-block-vagabond-plus-tabs-smooth .tabs-container .next-btn {
position: absolute;
width: 30px;
top: 0;
bottom: 0;
z-index: 200;
cursor: pointer;
}
.wp-block-vagabond-plus-tabs-smooth .tabs-container .prev-btn {
transform: translateX(-30px);
}
.wp-block-vagabond-plus-tabs-smooth .tabs-container .next-btn {
right: 0;
transform: translateX(10px);
} .wp-block-vagabond-plus-tabs-smooth .tabs-container::before {
content: '\003C';
left: -1rem;
} .wp-block-vagabond-plus-tabs-smooth .tabs-container::after {
right: 0px;
content: '\003E';
}
.wp-block-vagabond-plus-tabs-smooth .indicators div {
cursor: pointer; transition: all 0.3s ease;
width: 15px;
aspect-ratio: 1;
border-radius: 50%;
border: 1px solid var(--wp--preset--color--va-black);
}
.wp-block-vagabond-plus-tabs-smooth .indicators div.active {
background-color: var(--wp--preset--color--va-blue);
}
.wp-block-vagabond-plus-tabs-smooth .indicators div:hover {
opacity: 0.6;
}
@media only screen and (max-width: 1250px) {
.wp-block-vagabond-plus-tabs-smooth.instant-transition {
display: flex;
flex-direction: column;
border-bottom: none;
}
.wp-block-vagabond-plus-tabs-smooth.instant-transition .tabs-header {
height: 20vw;
min-height: 20vw;
margin-bottom: 3rem;
}
.wp-block-vagabond-plus-tabs-smooth.instant-transition .tabs-container {
flex-basis: auto;
}
.wp-block-vagabond-plus-tabs-smooth.instant-transition
.tabs-header
.image-div
img {
height: 100%;
}
.wp-block-vagabond-plus-tabs-smooth .tabs-container::before {
left: 0;
}
.wp-block-vagabond-plus-tabs-smooth .tabs-container .prev-btn {
transform: none;
}
.wp-block-vagabond-plus-tabs-smooth .indicators {
margin-top: 10px;
}
.wp-block-vagabond-plus-tabs-smooth .indicators div {
width: 7px;
}
}