.introduction {
display: grid;
grid-template: "title img" "text img" "link img" / 2fr 1fr;
margin-top: 50px;
gap: 15px;
padding: 0;
align-items: center;
}
.introduction.imageless {
grid-template: "title" "text" "link" / 1fr;
}
.introduction__title {
grid-area: title;
margin-bottom: 15px;
color: #1D1D1F;
font-family: Manrope;
font-size: 32px;
font-weight: 700; }
.introduction__text {
grid-area: text;
color: #4C525F;
font-family: Nunito Sans;
font-size: 18px;
font-weight: 400;
line-height: 170%;
}
.introduction-link {
grid-area: link;
border-radius: 25px;
background-color: #366CCD;
width: 299px;
height: 68px;
padding: 10px 15px 10px 23px;
color: #FFF;
font-family: Manrope;
font-size: 18px;
font-weight: 700;
border: none;
text-align: center;
line-height: 245%;
text-decoration: none;
transition: background-color 0.2s ease;
}
.introduction-link:hover {
background-color: #1f4fa8;
color: white;
}
.introduction__img {
grid-area: img;
width: 500px;
}
@media (max-width: 1200px) {
.introduction {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 40px;
}
.introduction__text {
text-align: center;
}
.introduction-link {
margin: 0 auto;
}
}
@media (max-width: 576px) {
.introduction {
padding: 0 20px;
}
.introduction__title {
font-size: 35px;
text-align: center;
}
a.introduction-link {
font-size: 16px;
width: 100%;
max-width: 400px;
}
}