.client { &__area { // update v0.2 &-8 { background-color: var(--black-2); background-image: url("/assets/imgs/essential-img/bg-axtra.png"); padding-top: 150px; padding-bottom: 140px; @media #{$lg} { padding-top: 110px; padding-bottom: 110px; } @media #{$md} { padding-top: 100px; padding-bottom: 100px; } @media #{$sm} { padding-top: 50px; padding-bottom: 50px; } .section_wrapper::before { background-color: #313131; } .about-sub-right { font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--white); padding-bottom: 10px; } .react_border { border-color: #313131; span { letter-spacing: 1px; font-weight: 400; font-size: 16px; color: var(--white); display: inline-block; transform: rotate(-45deg); } } } } &__section { display: flex; gap: 30px; margin-bottom: 110px; justify-content: space-between; @media #{$sm} { flex-wrap: wrap; justify-content: center; text-align: center; margin-bottom: 50px; } &__title { color: var(--white); font-size: 80px; line-height: 1; text-transform: uppercase; @media #{$xl} { font-size: 60px; } @media #{$lg} { font-size: 48px; } @media #{$md} { font-size: 40px; } @media #{$sm} { font-size: 40px; } & span { font-family: $font_newyork; } } &__dis { max-width: 240px; color: var(--gray-2); font-size: 18px; line-height: 1.5; @media #{$sm} { max-width: 100%; } } } &__logo { display: grid; grid-gap: 120px 60px; grid-template-columns: repeat(6, 1fr); align-items: center; @media #{$lg} { grid-gap: 80px 40px; } @media #{$md} { grid-gap: 60px 40px; grid-template-columns: repeat(4, 1fr); } @media #{$sm} { grid-gap: 50px; grid-template-columns: repeat(3, 1fr); } img { max-width: 100%; } } }