.video-section{
padding: 0;
padding-bottom: 80px;	
}
.video-section__title{
margin-bottom: 50px;
display: flex;
justify-content: space-between;
gap: 20px;
}
.video-section__title .description{
margin: 0;
padding: 0;
max-width: 454px;
color: rgb(210, 220, 229);
font-size: 20px;
font-weight: 400;
line-height: 130%;
letter-spacing: 0px;
}
.video-section__title .title{
margin: 0;
color: rgba(255, 255, 255, 1);
font-family: "StapelR", sans-serif;
font-size: 53px;
font-weight: 400;
line-height: 110%;
letter-spacing: 0px;
text-transform: uppercase;
}
.video-section__content{
position: relative;
}
.video-section__content:hover{
background: rgba(36, 55, 70, 0.2);
>.video-shirma{
opacity: 1;
}
>.play-button{
>circle{
fill: #BDD774;
}
}
}
.video-section__content video{
padding: 0;
width: 100%;
border-radius: 12px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.video-section__content .play-button{
padding: 0;
width: 120px;
height: 120px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
z-index: 2;
transition: .3s 
ease-in-out;
}
.video-section__content .play-button circle{
transition: fill .15s ease-in-out;
}
.video-shirma{
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(36, 55, 70, 0.2);
transition: opacity .15s ease-in-out;
pointer-events: none;
}
@media (max-width: 1199px) {
.video-section__title .title{
font-size: 45px;
}
}
@media (max-width: 767px) {
.video-section{
padding-bottom: 50px;
}
.video-section__title{
margin-bottom: 20px;
flex-direction: column;
}
.video-section__title .description{
max-width: 505px;
font-size: 16px;
}
.video-section__content .play-button{
width: 90px;
height: 90px;
}
}
@media (max-width: 639px) {
.video-section__title .description{
max-width: none;
}
}
@media (max-width: 359px) {
.video-section__title .title{
font-size: 30px;
}
}