/home/bdqbpbxa/demo-subdomains/billine.goodface.com.ua/css/adaptive.css
@media screen and (max-width: 1300px) {
/* Homepage */
.homepage-main-section .homepage-main__image {
margin-right: 5%;
}
/* API */
.api-content-container .api-content-box,
.api-section-container {
grid-column-gap: 24px;
}
.api-section-container {
grid-template-columns: 260px 1fr;
}
.api-content-container .api-content-box {
grid-template-columns: 1fr 280px;
}
.api-editor h1 *,
.api-editor h1 {
font-size: 28px;
line-height: 110%;
letter-spacing: -0.03em;
}
.api-editor h2 *,
.api-editor h2 {
font-size: 26px;
line-height: 110%;
letter-spacing: -0.03em;
}
.api-editor h3 *,
.api-editor h3 {
font-size: 26px;
line-height: 110%;
letter-spacing: -0.03em;
}
.api-editor h4 *,
.api-editor h5 *,
.api-editor h6 *,
.api-editor h4,
.api-editor h5,
.api-editor h6 {
font-size: 17px;
line-height: 150%;
}
.api-editor p,
.api-editor ul,
.api-editor li {
font-size: 14px;
line-height: 150%;
}
.api-response {
padding-left: 0;
padding-right: 0;
}
.api-response .api-response__list {
margin-left: 16px;
}
.api-response .api-response__list li {
grid-template-columns: 150px 1fr;
}
.api-editor li:before {
top: 8px;
}
}
@media screen and (max-width: 1200px) {
/* Homepage */
.homepage-main-container {
gap: 40px;
}
.homepage-main-section .homepage-main__text-box {
gap: 16px;
}
.homepage-main-section .homepage-main__image {
max-width: 400px;
margin-right: 0;
-webkit-border-radius: 10px;
border-radius: 10px;
}
/* About */
.feature-section .info-block__editor h1,
.feature-section .info-block__editor h2,
.feature-section .info-block__editor h3,
.feature-section .info-block__editor h4,
.feature-section .info-block__editor h5,
.feature-section .info-block__editor h6 {
font-size: 30px;
line-height: 110%;
letter-spacing: -0.03em;
}
/* Connect | Main section */
.connect-main-section .connect-main__way {
max-width: 708px;
margin-left: auto;
margin-right: auto;
}
.connect-main-section .connect-main__way-img {
left: -15px;
width: 754px;
height: 502px;
}
.connect-main-section .connect-main__way-img .way-img:first-child {
display: none;
}
.connect-main-section .connect-main__way-img .way-img:nth-child(2) {
display: block;
}
.connect-main-section .connect-main__way:after {
bottom: 98px;
width: calc(50vw - 354px);
}
.connect-main-section .connect-way__list {
grid-template-columns: repeat(3, 1fr);
grid-gap: 75px 43px;
padding-right: 23px;
}
.connect-main-section .connect-way__list > *:nth-child(8) {
display: block;
}
.connect-main-section .connect-way__title {
height: 63px;
}
/* Contacts */
.contacts-address-section .info-block__image {
height: 251px;
}
}
@media screen and (max-width: 1100px) {
/* API */
.api-section-container {
grid-template-columns: 230px 1fr;
}
.api-content-container .api-content-box {
grid-template-columns: 1fr 250px;
}
.api-content-container .api-content-box,
.api-section-container {
grid-column-gap: 16px;
}
.api-navigation {
padding: 16px;
}
.api-navigation .os-content {
gap: 16px;
}
.api-info-response .api-info-response__button {
padding: 16px;
}
.api-info-example .api-info-example__code-block {
padding: 16px;
}
}
@media screen and (max-width: 1024px) {
/* Homepage */
.-homepage main {
margin-top: 88px;
}
/* Homepage | Main section */
.homepage-main-container {
flex-direction: column-reverse;
}
.homepage-main-section .homepage-main__text-box {
max-width: none;
}
.homepage-main-section .homepage-main__image {
height: 275px;
}
.homepage-main-section .homepage-main__image:before {
top: 24px;
right: 24px;
left: 24px;
bottom: -12px;
filter: blur(20px);
-webkit-border-radius: 9px;
border-radius: 9px;
}
.homepage-main-section .homepage-main__image img {
height: 100%;
object-fit: contain;
}
/* Homepage | Partners section */
.partners-section .partners-section__grid {
grid-auto-rows: 92px;
grid-gap: 12px;
}
.partners-section .partners-section__grid li {
-webkit-border-radius: 9px;
border-radius: 9px;
}
/* Homepage | Support section */
.support-container {
flex-direction: column;
gap: 24px;
padding: 24px 16px;
}
.support-section .support-section__text-box {
max-width: none;
}
.support-section .support-section__image {
height: 246px;
}
.support-section .support-section__image img {
-webkit-border-radius: 13px;
border-radius: 13px;
}
.support-section .support-section__text p:not(:first-child),
.support-section .support-section__text {
margin-top: 16px;
}
.support-section .support-section__button {
margin-top: 16px;
}
.support-section .support-section__messangers {
margin-bottom: 24px;
}
/* About */
.feature-section .feature-section__list > *:nth-child(even) {
flex-direction: column-reverse;
}
/* Contacts */
.contacts-main-container {
gap: 16px;
}
.contacts-main-section .contacts-main__text {
max-width: none;
}
/* API */
.api-error {
display: block;
}
.api-error .api-error-container {
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: column;
gap: 16px;
text-align: center;
}
.api-error .api-error__icon {
width: 80px;
}
.api-error .api-error__icon img,
.api-error .api-error__icon svg {
display: block;
width: 100%;
height: auto;
}
.api-error .api-error__text {
max-width: 720px;
}
.api-section {
display: none;
}
}
@media screen and (max-width: 759px) {
/* Homepage | Partners section */
.partners-section .partners-section__grid {
grid-template-columns: repeat(2, 1fr);
}
/* Connect | Main section */
.connect-main-section .connect-main__way {
max-width: 336px;
}
.connect-main-section .connect-main__way-img {
top: 57px;
left: -4px;
width: 353px;
height: 594px;
}
.connect-main-section .connect-main__way:after {
bottom: 90px;
width: calc(50vw - 150px);
}
.connect-main-section .connect-main__way-img .way-img:nth-child(2),
.connect-main-section .connect-main__way-img .way-img:first-child {
display: none;
}
.connect-main-section .connect-main__way-img .way-img:nth-child(3) {
display: block;
}
.connect-main-section .connect-way__list {
grid-template-columns: repeat(2, 1fr);
grid-gap: 40px 12px;
padding-right: 0;
}
.connect-main-section .connect-way__list > *:nth-child(8) {
display: none;
}
.connect-main-section .connect-way__title *,
.connect-main-section .connect-way__title {
font-size: 13px;
}
.connect-main-section .connect-way__item {
gap: 16px;
}
}