:where(:not(iframe, canvas, img, svg, video):not(svg *)) {
    all: unset;
    display: revert
}

*,
:after,
:before {
    box-sizing: border-box
}

a,
button {
    cursor: pointer
}

ol,
ul {
    list-style: none
}

img {
    max-width: 100%;
    vertical-align: bottom
}

table {
    border-collapse: collapse
}

textarea {
    white-space: revert
}

html {
    font-size: 100%
}

body {
    background-color: #fff;
    color: #1a1919;
    font-family: circeregular;
    font-size: 1rem;
    font-weight: 500;
    overflow-x: hidden
}

.container {
    margin: 0 auto;
    max-width: 1222px;
    padding: 0 11px
}

.hashtag {
    color: #fffffe;
    font-family: circeregular;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    margin-bottom: 32px
}

.video-part {
    padding: 150px 0 0
}

.video-part iframe {
    min-height: 670px;;
}


.video-part video {
    height: auto;
    width: 100%;
    border-radius: 30px;
}

.header2 .nafto {
    margin-right: 57px
}

.header2 .nafto img {
    width: 215px
}

.header2 .frng-footer {
    margin-bottom: 9px
}

.header2 .header-content .menu {
    width: 308px
}

.header2 .header-content .menu li:not(:last-child) {
    margin-right: 64px
}

.header2 .header-content .h3 {
    font-size: 20px
}

.h1 {
    color: #fffffe;
    font-family: circebold;
    font-size: 86px;
    font-style: normal;
    font-weight: 600;
    line-height: 87px
}

.large-container {
    margin: 0 auto;
    max-width: 1784px;
    padding: 0 15px 30px 44px
}

.logos-part {
    align-items: center;
    display: flex
}

.nafto {
    margin-right: 53px
}

.header-content {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 80px;
    padding-top: 50px
}

.header-content .h3 {
    font-size: 18px;
    margin-bottom: 0
}

.header-content .menu {
    display: flex;
    width: 415px
}

.header-content .menu li:not(:last-child) {
    margin-right: 50px
}

.header-content .menu a {
    color: #1a1919;
    font-family: circeregular;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    -webkit-text-decoration-line: underline;
    text-decoration-line: underline;
    transition: all .3s ease
}

.header-content .menu a:hover {
    color: #008ec1
}

.hero-main {
    display: flex;
    justify-content: flex-start
}

.portrait-part {
    align-self: baseline;
    border-radius: 30px;
    margin-right: 160px;
    overflow: hidden;
    width: 789px
}

.portrait-part img {
    width: 100%
}

.information-part {
    padding-top: 40px;
    position: relative;
    width: 680px
}

.person-name {
    color: #1a1919;
    font-family: circebold;
    font-size: 50px;
    font-style: normal;
    font-weight: 700;
    line-height: 47px;
    margin-bottom: 29px
}

.person-work {
    margin-bottom: 19px
}

.person-work,
.short-info {
    color: #666;
    font-family: circeregular;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 27px
}

.short-info {
    margin-bottom: 155px
}

.mega-quote {
    display: block;
    position: relative;
    z-index: -1
}

.mega-quote:before {
    background: #fafafa;
    border-radius: 30px;
    display: block;
    height: 377px;
    left: -318px;
    position: absolute;
    top: -63px;
    width: 1053px
}

.mega-quote.kontny:before {
    height: 450px;
}

.mega-quote p {
    color: #1a1919;
    font-family: circebold;
    font-size: 25px;
    font-weight: 700;
    line-height: 40px;
    padding-left: 10px;
    padding-right: 50px;
    padding-top: 12px;
    position: relative
}

.mega-quote p:before {
    background-image: url(../img/icons/quote.svg);
    content: "";
    display: block;
    height: 41px;
    left: -62px;
    position: absolute;
    top: -43px;
    width: 53px
}

.mega-quote:before {
    content: ""
}

.hero-block {
    margin-bottom: 50px;
    padding-bottom: 50px
}

.hero-block .normal_text {
    font-family: circeregular;
    font-size: 20px;
    line-height: 27px;
    margin-bottom: 29px
}

.hero-block .normal_text span {
    font-family: circeregular
}

.h2_2 {
    color: #1a1919;
    font-family: circebold;
    font-size: 25px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
    margin-bottom: 35px
}

.hero-main {
    margin-bottom: 48px;
    padding-bottom: 100px
}

.story-name {
    color: #1a1919;
    font-family: circebold;
    font-size: 50px;
    font-style: normal;
    font-weight: 700;
    line-height: 58px;
    max-width: 921px;
    padding-left: 85px
}

.margin-block,
.story-name {
    margin-bottom: 65px
}

.centered-text {
    margin: 0 auto 90px;
    width: 802px
}

.big-content {
    margin: 0 auto;
    max-width: 1760px
}

.photo-block {
    border-radius: 15px;
    margin: 0 auto 60px;
    max-width: 1010px;
    overflow: hidden
}

.photo-block img {
    width: 100%
}

.blue-quote {
    color: #008ec1;
    font-size: 25px;
    font-style: normal;
    font-weight: 400;
    line-height: 161%
}

.blue-quote,
.blue-quote span {
    font-family: circeregular
}

.big-text {
    color: #1a1919;
    font-family: circebold;
    font-size: 25px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    max-width: 995px;
    padding-left: 90px
}

.blue-quote-block {
    margin: 0 auto 68px;
    max-width: 1010px
}

.white-links {
    color: #fff;
    font-family: circelight;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    position: relative;
    -webkit-text-decoration-line: none;
    text-decoration-line: none
}

.white-links:after {
    background-color: #fff;
    bottom: 3px;
    content: "";
    display: block;
    height: 1px;
    position: absolute;
    width: 100%
}

.white-links:hover:after {
    background-color: #000
}

.logo-nafto {
    cursor: default
}

.main-screen {
    background-color: #008ec1;
    color: #fff;
    display: flex;
    max-height: 600px
}

.main-screen .illustration-part {
    overflow: hidden;
    width: 1041px
}

.main-screen .illustration-part img {
    max-width: 1041px;
    -o-object-fit: cover;
    object-fit: cover
}

.main-screen .back-block {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0 auto;
    padding-bottom: 76px;
    padding-left: 32px;
    padding-top: 47px;
    width: 730px
}

.main-screen .logo-frng {
    margin-top: 3px
}

.main-screen .logo-frng img {
    max-width: 92px
}

.main-screen .logo-part {
    align-items: flex-start;
    display: flex;
    margin-left: -14px
}

.main-screen .logo-part a {
    display: block
}

.main-screen .logo-part a.logo-nafto {
    margin-right: 34px
}

.main-screen .logo-part a.logo-nafto img {
    width: 275px
}

.main-screen .header {
    align-items: flex-start;
    display: flex;
    justify-content: space-between
}

.navigation {
    padding-left: 0;
    padding-top: 5px
}

.navigation-ul {
    display: flex;
    flex-direction: column
}

.navigation-li {
    margin-bottom: 16px
}

.navigation-li a {
    transition: all .3s ease
}

.navigation-li a:hover {
    color: #1a1919
}

.mobile-main-illustration {
    display: none
}

.project-idea {
    padding-bottom: 0;
    padding-top: 70px
}

.h2 {
    color: #1a1919;
    font-family: circebold;
    font-size: 50px;
    font-style: normal;
    line-height: 48px;
    margin-bottom: 15px
}

.normal_text,
.section-subname {
    color: #1a1919;
    font-family: circeregular;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 27px
}

.section-subname {
    margin-bottom: 74px
}

.normal_text {
    margin-bottom: 20px
}

.normal_text span {
    font-family: circeregular
}

.wrap-parts {
    display: grid;
    gap: 96px 45px;
    grid-template-areas: "part-1 part-1 part-2 part-2" "part-1 part-1 part-2 part-2" "part-1 part-1 part-4 part-4" "part-3 part-3 part-4 part-4" "part-3 part-3 part-4 part-4";
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr
}

.part-1 {
    background-image: url(../img/illustrations/women.png);
    background-position: 25%;
    background-repeat: no-repeat;
    grid-area: part-1;
    height: 105%
}

.part-2 {
    grid-area: part-2;
    padding-left: 74px
}

.part-3 {
    grid-area: part-3
}

.part-4 {
    background-image: url(../img/illustrations/men.png);
    background-position: 75%;
    background-repeat: no-repeat;
    background-size: cover;
    grid-area: part-4;
    height: 112%;
    margin-left: 65px;
    margin-top: -35px
}

.part-img {
    border-radius: 15px;
    overflow: hidden
}

.part-img img {
    border-radius: 15px;
    width: 100%
}

.h3 {
    color: #008ec1;
    font-family: circeregular;
    font-size: 26px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    margin-bottom: 30px
}

.story-section {
    padding-bottom: 80px;
    padding-top: 90px
}

.story-section .h2 {
    margin-bottom: 85px
}

.card {
    background-color: #e7e7e7;
    border-radius: 15px;
    display: block;
    height: 432px;
    overflow: hidden;
    position: relative;
    width: 258px
}

.card:hover img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

.card img {
    display: block;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    transition: all .4s ease
}

.card .hero-info {
    bottom: 0;
    left: 0;
    padding: 25px;
    position: absolute
}

.card .hero-name {
    color: #fff;
    display: block;
    font-family: circebold;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px
}

.card .hero-work {
    color: #fff;
    font-family: circelight;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    padding-top: 10px
}

.wrap-cards {
    display: flex;
    flex-flow: wrap;
    justify-content: flex-start
}

.wrap-cards .card:not(:nth-child(4n)) {
    margin-bottom: 50px;
    margin-right: 49px
}

.mobile-portrait {
    display: none
}

.l-footer {
    background: #f4f4f4;
    border-radius: 30px;
    justify-content: space-between;
    margin: 30px;
    padding: 50px
}

.l-footer,
.l-footer .logos-part {
    align-items: center;
    display: flex
}

.l-footer .nafto {
    margin-right: 53px
}

.l-footer .nafto img {
    width: 218px
}

.l-footer .frng-footer {
    margin-top: -3px
}

.l-footer .menu {
    display: flex
}

.l-footer .menu li:not(:last-child) {
    margin-right: 30px
}

.l-footer .menu a {
    color: #1a1919;
    font-family: circeregular;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    position: relative;
    -webkit-text-decoration-line: none;
    text-decoration-line: none;
    transition: all .3s ease
}

.l-footer .menu a:hover {
    color: #008ec1
}

.l-footer .menu a:hover:after {
    background-color: #008ec1
}

.l-footer .menu a:after {
    background-color: #000;
    bottom: 3px;
    content: "";
    display: block;
    height: 1px;
    position: absolute;
    width: 100%
}

.l-footer .socials {
    align-items: center;
    display: flex
}

.l-footer .socials li:not(:last-child) {
    margin-right: 30px
}

.l-footer .socials a svg path {
    transition: all .3s ease
}

.l-footer .socials a:hover svg path {
    fill: #008ec1
}

@media screen and (max-width:1900px) {

    .main-screen .illustration-part,
    .main-screen .illustration-part img {
        width: 933px
    }
}

@media screen and (max-width:1800px) {

    .main-screen .illustration-part,
    .main-screen .illustration-part img {
        width: 733px
    }

    .main-screen .back-block {
        padding-bottom: 50px
    }
}

@media screen and (max-width:1600px) {

    .main-screen .illustration-part,
    .main-screen .illustration-part img {
        width: 733px
    }

    .main-screen .back-block {
        width: 665px
    }

    .h1 {
        font-size: 61px;
        line-height: 61px
    }
}

@media screen and (max-width:1550px) {
    .hero-block {
        overflow-x: hidden
    }

    .portrait-part {
        margin-right: 86px
    }

    .mega-quote.kontny:before {
        height: 400px;
    }

    .short-info {
        margin-bottom: 102px
    }

    .mega-quote p {
        font-size: 22px;
        line-height: 37px
    }

    .mega-quote:before {
        height: 340px
    }
}

@media screen and (max-width:1450px) {
    .logo-nafto svg {
        width: 200px
    }

    .logo-frng {
        width: 95px
    }

    .navigation {
        padding-top: 4px
    }

    .navigation-li {
        margin-bottom: 15px
    }

    .main-screen .illustration-part,
    .main-screen .illustration-part img {
        width: 615px
    }

    .main-screen .back-block {
        width: 606px
    }

    .header-content .menu {
        display: flex;
        width: 244px
    }
}

@media screen and (max-width:1300px) {
    .mega-quote.kontny:before {
        height: 500px;
    }

    .main-screen .illustration-part,
    .main-screen .illustration-part img {
        width: 490px
    }

    .h1 {
        font-size: 45px;
        line-height: 43px
    }

    .main-screen .back-block {
        padding-left: 15px;
        padding-top: 25px;
        width: 615px
    }

    .hashtag {
        font-size: 20px;
        line-height: 21px;
        margin-bottom: 12px
    }

    .main-screen .logo-part a.logo-nafto {
        margin-right: 31px
    }

    .logo-nafto svg {
        width: 180px
    }

    .logo-frng {
        width: 85px
    }

    .wrap-parts {
        gap: 100px 0
    }

    .container {
        max-width: 1024px
    }

    .wrap-cards {
        display: flex;
        flex-flow: wrap;
        justify-content: flex-start
    }

    .wrap-cards .card {
        height: 380px;
        width: 223px
    }

    .wrap-cards .card:not(:nth-child(4n)) {
        margin-bottom: 30px;
        margin-right: 30px
    }
}

@media screen and (max-width:1200px) {
    .l-footer {
        padding: 37px
    }

    .l-footer .nafto {
        margin-right: 15px
    }

    .l-footer .nafto img {
        max-width: 170px
    }

    .l-footer .menu a {
        font-size: 20px
    }

    .l-footer .socials li:not(:last-child) {
        margin-right: 13px
    }
}

@media screen and (max-width:1160px) {
    .main-screen .back-block {
        width: 515px
    }

    .main-screen .logo-part a.logo-nafto img {
        width: 240px
    }

    .main-screen .logo-frng img {
        max-width: 80px
    }
}

@media screen and (max-width:1050px) {
    .mega-quote.kontny:before {
        height: 320px;
    }

    .wrap-cards .card:not(:nth-child(4n)) {
        margin-bottom: 20px;
        margin-right: 17px
    }

    .wrap-cards .card {
        margin-bottom: 20px;
        margin-right: 20px
    }

    .information-part {
        width: 100%
    }

    .portrait-part {
        display: none
    }

    .mobile-portrait {
        border-radius: 30px;
        display: block;
        margin: 40px auto;
        max-width: 500px;
        overflow: hidden
    }

    .story-name {
        font-size: 63px;
        line-height: 54px
    }

    .mega-quote {
        padding-left: 64px
    }

    .mega-quote:before {
        height: 219px;
        left: -34px;
        top: -72px;
        width: 967px
    }
}

@media screen and (max-width:1000px) {
    .video-part {
        padding: 10px 0px 10px
    }
    .video-part iframe {
        min-height: 506px;
    }
    .illustration-part {
        display: none
    }

    .mobile-main-illustration {
        display: block;
        width: 100%
    }

    .main-screen {
        max-height: none
    }

    .main-screen .back-block {
        padding: 20px 0;
        width: 100%
    }

    .header {
        padding: 0 25px
    }

    .main-screen .logo-part {
        align-items: flex-start
    }

    .main-info {
        position: relative
    }

    .main-info .hashtag {
        left: 50%;
        position: absolute;
        top: -40px;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%)
    }

    .h1 {
        padding: 20px;
        text-align: center
    }

    .project-idea {
        padding-bottom: 5px;
        padding-top: 80px
    }

    .section-subname {
        margin-bottom: 40px
    }

    .container {
        max-width: 750px
    }

    .wrap-parts {
        display: flex;
        flex-direction: column;
        gap: 0
    }

    .wrap-parts .part {
        margin-bottom: 34px
    }

    .part-1 {
        background-size: cover;
        min-height: 450px;
        order: 1;
        width: 100%
    }

    .part-2 {
        order: 2;
        padding-left: 0
    }

    .part-3 {
        order: 4;
        padding-left: 0
    }

    .part-4 {
        margin-left: 0;
        min-height: 450px;
        order: 3
    }

    .wrap-cards .card:not(:nth-child(4n)) {
        margin-bottom: 20px;
        margin-right: 17px
    }

    .wrap-cards .card:nth-child(4n) {
        margin-bottom: 15px
    }

    .wrap-cards .card:not(:nth-child(3n)) {
        margin-bottom: 20px;
        margin-right: 17px
    }
}

@media screen and (max-width:970px) {
    .wrap-cards .card {
        height: 360px;
        margin: 10px 5px;
        width: 210px
    }

    .wrap-cards .card:not(:nth-child(3n)),
    .wrap-cards .card:not(:nth-child(4n)) {
        margin-bottom: 12px;
        margin-left: 0;
        margin-right: 29px
    }

    .header-content .h3 {
        display: none
    }

    .header-content {
        margin-bottom: 19px;
        padding-top: 28px
    }

    .centered-text {
        margin: 0 auto 90px;
        width: 87%
    }

    .main-screen .logo-frng img {
        max-width: 80px
    }
}

@media screen and (max-width:920px) {
    .l-footer {
        flex-direction: column;
        padding: 37px
    }

    .l-footer .logos-part {
        margin-bottom: 20px
    }

    .l-footer .menu {
        margin-bottom: 25px
    }
}

@media screen and (max-width:760px) {
    .mega-quote.kontny:before {
        height: 387px;
    }

    .wrap-cards .card:not(:nth-child(3n)),
    .wrap-cards .card:not(:nth-child(4n)) {
        margin-bottom: 12px;
        margin-left: 0;
        margin-right: 6px
    }

    .container {
        max-width: 590px
    }

    .story-section .h2 {
        margin-bottom: 50px
    }

    .wrap-cards .card {
        height: 307px;
        margin: 10px 5px;
        width: 180px
    }

    .card .hero-info {
        padding: 9px
    }

    .header-content {
        flex-direction: column
    }

    .header-content .logos-part {
        margin-bottom: 25px
    }

    .header-content .menu {
        width: auto
    }

    .mega-quote:before {
        height: 290px;
        width: 105%
    }

    .story-name {
        font-size: 53px;
        line-height: 46px;
        margin-bottom: 50px
    }

    .hero-main {
        margin-bottom: 48px;
        padding-bottom: 50px
    }

    .margin-block,
    .story-name {
        margin-bottom: 64px
    }

    .blue-quote {
        font-size: 24px;
        line-height: 31px
    }

    .big-text {
        font-size: 26px;
        line-height: 39px;
        padding-left: 55px
    }

    .large-container {
        padding-left: 15px
    }

    .header2 .header-content .menu {
        width: auto
    }

    .header2 .header-content .menu li:not(:last-child) {
        margin-right: 27px
    }

    .header2 .nafto {
        margin-right: 33px
    }

    .video-part {
        padding: 0
    }
}

@media screen and (max-width:600px) {
    .mega-quote.kontny:before {
        height: 301px;
    }
    .video-part iframe {
        min-height: 221px;
    }
    .container {
        max-width: 95%
    }

    .story-section {
        padding-top: 50px
    }

    .wrap-cards {
        justify-content: center;
        margin: 0 auto
    }

    .wrap-cards .card {
        height: 277px;
        width: 175px
    }

    .card img {
        height: auto
    }

    .card .hero-name {
        font-size: 15px;
        line-height: 18px
    }

    .card .hero-work {
        font-size: 9px;
        line-height: 11px;
        padding-top: 5px
    }

    .wrap-cards .card:not(:nth-child(3n)),
    .wrap-cards .card:not(:nth-child(4n)) {
        margin-bottom: 3px
    }

    .project-idea {
        padding-bottom: 4px
    }

    .header-content {
        margin-bottom: 19px;
        padding-top: 25px
    }

    .header-content .logos-part {
        margin-bottom: 33px
    }

    .nafto {
        margin-right: 66px
    }

    .nafto img {
        max-width: 148px;
        width: 148px
    }

    .header-content .logos-part {
        justify-content: space-between;
        width: 90%
    }

    .header-content .menu a {
        font-size: 16px
    }

    .person-name {
        font-size: 33px;
        line-height: 35px;
        padding-left: 24px
    }

    .information-part {
        padding-top: 34px
    }

    .mobile-portrait {
        margin: 28px auto
    }

    .mobile-portrait img {
        height: 287px;
        -o-object-fit: cover;
        object-fit: cover;
        width: auto
    }

    .short-info {
        margin-bottom: 113px
    }

    .person-work,
    .short-info {
        font-size: 15px;
        padding-left: 23px
    }

    .mega-quote {
        padding-left: 38px
    }

    .mega-quote p {
        font-size: 15px;
        line-height: 27px;
        padding-right: 20px
    }

    .mega-quote p:before {
        background-size: contain;
        height: 31px;
        left: -17px;
        top: -43px;
        width: 39px
    }

    .story-name {
        font-size: 29px;
        line-height: 35px;
        padding-left: 29px
    }

    .margin-block,
    .story-name {
        margin-bottom: 18px
    }

    .hero-block .normal_text {
        font-size: 15px;
        line-height: 28px
    }

    .h2_2 {
        font-size: 25px;
        margin-bottom: 22px
    }

    .centered-text {
        margin: 0 auto 60px
    }

    .photo-block {
        margin: 0 auto 45px
    }

    .photo-block img {
        height: 288px;
        -o-object-fit: cover;
        object-fit: cover;
        width: auto
    }

    .blue-quote {
        font-size: 16px;
        line-height: 29px;
        padding-left: 25px;
        width: 83%
    }

    .big-text {
        font-size: 15px;
        line-height: 25px;
        padding-left: 20px
    }

    .header2 .frng-footer {
        margin-bottom: 0;
        min-width: 64px;
        width: 64px
    }
}

@media screen and (max-width:580px) {
    .main-screen .header {
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: space-between
    }

    .navigation-ul {
        display: flex;
        flex-direction: row
    }

    li.navigation-li:not(:last-child) {
        margin-right: 15px
    }

    .logo-nafto img {
        width: 160px
    }

    .logo-frng {
        width: 68px
    }

    .main-screen .back-block {
        padding: 19px 0
    }

    .main-screen .logo-part a.logo-nafto {
        margin-right: 28px
    }

    .navigation {
        padding-top: 0
    }

    .mobile-main-illustration {
        max-height: 251px;
        overflow: hidden
    }

    .hashtag {
        font-size: 15px;
        top: -34px
    }

    .h1 {
        font-size: 35px;
        line-height: 42px;
        padding: 29px 0 20px
    }

    .container {
        max-width: 100%
    }

    .project-idea {
        padding-top: 61px
    }

    .h2 {
        font-size: 30px;
        line-height: 32px;
        margin-bottom: 15px;
        text-align: center
    }

    .section-subname {
        font-size: 21px;
        margin: 0 auto 35px;
        max-width: 88%;
        text-align: center
    }

    .part-1 {
        height: 321px;
        min-height: 321px
    }

    .part-4 {
        height: 379px;
        min-height: 379px
    }

    .text-part {
        padding-left: 28px
    }

    .text-part .normal_text {
        font-family: circeregular
    }

    .normal_text {
        font-size: 17px;
        line-height: 27px
    }

    .h3 {
        margin-bottom: 42px
    }

    .part.text-part.right-part.part-2 {
        margin-bottom: 64px
    }

    .wrap-parts .part.part-4 {
        margin-bottom: 33px
    }

    .part-3 .h3 {
        margin-bottom: 32px
    }

    .story-section .h2 {
        margin-bottom: 27px
    }
}

@media screen and (max-width:480px) {
    .l-footer {
        margin: 36px 30px;
        padding: 37px 18px
    }

    .l-footer .nafto img {
        max-width: 146px
    }

    .frng-footer {
        max-width: 64px
    }

    .logos-part {
        justify-content: space-between;
        margin-bottom: 45px;
        width: 88%
    }

    .l-footer .menu {
        align-items: center;
        display: flex;
        flex-direction: column
    }

    .l-footer .menu li:not(:last-child) {
        font-size: 14px;
        margin-bottom: 15px;
        margin-right: 0
    }

    .l-footer .menu a {
        font-size: 16px
    }

    .l-footer .menu {
        margin-bottom: 42px
    }

    .l-footer .logos-part {
        margin-bottom: 38px
    }

    .socials svg {
        max-width: 30px
    }

    .frng-footer {
        display: block;
        min-width: 64px;
        width: 64px
    }

    .frng-footer img {
        width: 64px
    }

    .nafto {
        margin-right: 26px
    }

    .l-footer .nafto img {
        max-width: 117px
    }
}

@media screen and (max-width:400px) {
    .story-section .container {
        padding: 0 2px
    }

    .wrap-cards .card {
        height: 261px;
        width: 163px
    }

    .main-screen .logo-frng img {
        max-width: 72px
    }
}

@media screen and (max-width:360px) {
    .wrap-cards .card {
        height: 195px;
        width: 138px
    }

    .main-screen .logo-frng img {
        max-width: 68px
    }
}

/*# sourceMappingURL=style.min.css.map */