.napravlenie {
    position: absolute;
    position: relative;
    border-radius: 40px;
  height: 800px;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  transition: var(--transition);
}
.napravlenie:hover {
    transition: var(--transition);
    transform: translateY(-10px);
}
.napravlenia-flex {
    position: relative;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
  gap: 20px;
}
.napravlenie-block img {
    max-width: 20px;
    width: 100%;
    transform: rotateZ(180deg);
    margin: 10px;
}
.napravlenie-block {
position: absolute;
    bottom: 30px;
    left: 30px;
    width: 500px;
    border-radius: 30px;
    background: #F9F9F9;
    padding: 70px;
}
.napravlenie-block h3 {
    width: 80%;
font-weight: 600;
font-size: 36px;
line-height: 42px;
letter-spacing: 0px;
color: black;
margin-top: 40px;
margin-bottom: 40px;
}
.napravlenie-block-buton {
    display: flex;
    justify-content: space-between;
}
.napravlenie-block-buton a {
    font-weight: 600;
    font-size: 20px;
    color: #000;
    line-height: 24px;
    letter-spacing: 0px;
    border-radius: 20px;
    background: #EBEBEB;
    padding: 20px 30px;
    white-space: nowrap;
     transition: var(--transition);
}
.napravlenie-block-buton a:hover
 {
    transition: var(--transition);
    background: #E4A900;
}



@media only screen and (min-width: 320px) and (max-width: 768px) {
    .napravlenie-block img {
    margin: 0px;
    }
    .napravlenia-flex {
grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}
.napravlenie {
  height: 600px;
  border-radius: 20px;
}
.napravlenie-block {
    bottom: 20px;
    left: 20px;
    width: 295px;
    gap: 30px;
    padding: 40px;
}
.napravlenie-block h3 {
font-size: 20px;
line-height: 24px;
margin-top: 20px;
margin-bottom: 30px;
}
.napravlenie-block-buton a {
    font-size: 14px;
    line-height: 16px;
    border-radius: 12px;
    padding: 16px 20px;
}

}