.technologies-block {
overflow: hidden;
margin-bottom: var(--section-gap, 120px);
& * {
font-family: 'Mulish', sans-serif !important;
}
}
.technologies__header {
margin-bottom: 52px;
max-width: 900px;
display: flex;
row-gap: 16px;
flex-direction: column;
& .technologies__title {
font-size: 42px;
font-weight: 700;
line-height: 52px;
color: #1F4FCE;
max-width: 800px;
@media screen and (max-width: 1024px) {
font-size: 28px;
line-height: 35px;
}
@media screen and (max-width: 640px) {
font-size: 22px;
line-height: 29px;
}
}
& .technologies__subtitle {
font-size: 20px;
font-weight: 400;
line-height: 28px;
color: #1B1B1B;
@media screen and (max-width: 1024px) {
font-size: 16px;
line-height: 24px;
}
}
}
.technologies__slider {
overflow: initial;
& .swiper-wrapper {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: stretch;
box-sizing: border-box;
@media screen and (max-width: 640px) {
row-gap: 24px;
flex-direction: column;
transform: none !important;
}
}
& .swiper-slide {
flex: 0 0 560px;
width: 560px;
border-radius: 8px;
@media screen and (max-width: 640px) {
flex: auto;
width: 100% !important;
height: auto;
position: static !important;
}
}
}
.technologies__item {
padding: 20px;
position: relative;
border-radius: 20px;
background-color: white;
transform: translateY(0);
transition: transform .25s;
display: flex;
column-gap: 20px;
align-items: stretch;
@media screen and (max-width: 500px) {
padding: 16px;
flex-direction: column;
row-gap: 20px;
align-items: start;
}
&:hover {
transform: translateY(-2px);
}
& .technologies__item-image {
width: 50.77%;
min-width: 50.77%;
overflow: hidden;
border-radius: 20px;
aspect-ratio: 264 / 248;
@media screen and (max-width: 640px) {
width: 40%;
min-width: 40%;
height: 100%;
}
@media screen and (max-width: 500px) {
width: 100%;
aspect-ratio: 264 / 148;
}
& img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
}
& .technologies__item-detail {
display: flex;
row-gap: 20px;
flex-direction: column;
& .technologies__item-name {
font-size: 20px;
font-weight: 700;
line-height: 28px;
color: #1B1B1B;
}
& .technologies__item-text {
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: #1B1B1B;
}
& .technologies__item-link {
margin-top: auto;
margin-left: auto;
border-radius: 50%;
border: 1px solid #1F4FCE;
background-color: transparent;
width: 46px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
&::before {
content: '';
z-index: 1;
position: absolute;
inset: 0;
}
& svg {
width: 10px;
height: 20px;
& path {
fill: #1F4FCE;
}
}
}
}
}