.vertical-tab__button {
	border: none;
	border-top: 2px solid var(--secondary-palette-cool-grey-300);
	opacity: 0.5;
}

.vertical-tab__button.active {
	border-top: 5px solid var(--primary-palette-yellow);
	opacity: 1;
}

.vertical-tab__button:hover{
	opacity: 1;
}

.vertical-tab__bg--image::after {
	content:'';
	position: absolute;
	top:0;
	right:0;
	height: 100%;
	width: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top;
	z-index: -1;
}

.vertical-tab__box--image{
	border-radius: 10px;
	box-shadow: 0 2px 20px 0 #A6A3A340;
	background-color: var(--secondary-palette-white);
	max-height: 90%;
}

.vertical-tab__box {
	border: 1px solid var(--secondary-palette-warm-grey);
	background: linear-gradient(180deg, rgb(252 248 242 / 70%) 0%, rgb(252 248 242 / 0%) 121.32%);
	width: 85%;
	min-height: 75vh;
}

@media only screen and (min-height: 1000px) {
	.vertical-tab__box {
		min-height: 55vh;
	}
}

/* Portrait */
@media only screen 
  and (min-device-width: 993px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) {
  	.vertical-tab__box {
		min-height: 35vh;
	}

}

@media only screen and (min-height: 1200px) {
	.vertical-tab__box {
		min-height: 50vh;
	}
}

@media only screen and (min-height: 1400px) {
	.vertical-tab__box {
		min-height: 45vh;
	}
}

@media only screen and (min-height: 1600px) {
	.vertical-tab__box {
		min-height: 35vh;
	}
}

.vertical-tab__box::after{
	content: "";
	position: absolute;
	top:0;
	right: 0;
	width: 80%;
	height: 100%;
	background-image: url('../svg/vertical-tab-image-top-pattern.svg');
	background-repeat: no-repeat;
	background-size: cover;
}

.vertical-tab__box::before{
	content: "";
	position: absolute;
	bottom:0;
	left: 0;
	width: 100%;
	height: 50%;
	background-image: url('../svg/vertical-tab-image-bottom-pattern.svg');
	background-repeat: no-repeat;
	background-size: contain;
}

.vertical-tab__box--mobile {
	display: none;
}

.vertical-tab__box--mobile::after{
	border: 1px solid var(--secondary-palette-warm-grey);
	background-image:
        linear-gradient(180deg, rgba(252, 248, 242, 0.7) 0%, rgba(252, 248, 242, 0) 121.32%),
        url('../svg/vertical-tab-image-top-pattern.svg');
	background-repeat: no-repeat;
	background-size: cover;
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	height: 100%;
	width: 85%;
	z-index: -1;
}

.vertical-tab__box--mobile::before{
    background-image: url('../svg/vertical-tab-image-bottom-pattern.svg');
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    position: absolute;
    bottom: 0;
    left: 7%;
    height: 50%;
    width: 85%;
    z-index: 0;
}

.vertical-tab__content--height{
	min-height: 600px;
	position: sticky;
	top: 10vh; 
}

.vertical-tab__content {
  display: -webkit-box;
   -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vertical-tab__content.expanded {
  -webkit-line-clamp: none;
  display: block;
}

@media only screen and (width <= 992px) {
    .vertical-tab__button.active .vertical-tab__box--mobile {
        display: flex;
    }
}

@media only screen and (width <= 576.98px) {
    .vertical-tab__box--mobile::before{
		display: none;
	}

	.vertical-tab__box--mobile::after{
		background-image: linear-gradient(180deg, rgba(252, 248, 242, 0.7) 0%, rgba(252, 248, 242, 0) 121.32%);
	}
}