main > .wrapper > .container {
    max-width: 1440px;
    margin: 0 auto;
}

/* A */

main > .wrapper#a {
    padding: 85px 0 50px;
    background: #f4f4f4;
}

main > .wrapper#a > .container {
    display: flex;
}

main > .wrapper#a > .container > .content {
    display: flex;
    flex-wrap: wrap;
    margin: 0 50px 0 0;
    height: fit-content;
}

main > .wrapper#a > .container > img {
    margin: 12px 0 50px 55px;
}

main > .wrapper#a > .container > .content > span,
main > .wrapper#a > .container > .content > h2 {
    height: max-content;
    font-size: 18px;
    line-height: 1.44;
}

main > .wrapper#a > .container > .content > span:first-child,
main > .wrapper#a > .container > .content h2,
main > .wrapper#b > .container > .content h2,
main > .wrapper#a > .container > .content h3 {
    font-size: 35px;
    font-weight: bold;
    margin:0;
    margin-bottom: 30px;
    line-height: normal;
    color:#8c7050;
}
main > .wrapper#c > .container > .content h2 {
    font-size: 35px;
    font-weight: bold;
    margin:0;
    margin-bottom: 30px;
    line-height: normal;
    color:#ffd600;}

/* B */

main > .wrapper#b {
    margin: 0 auto;
    padding: 85px 0 67px;
    background: #fff;
}

main > .wrapper#b > .container > .content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 90px;
}

main > .wrapper#b > .container > .content > div {
    display: grid;
    grid-template-rows: auto 0 auto auto;
}

main > .wrapper#b > .container > .content > div > span {
    font-size: 18px;
    line-height: 26px;
}

main > .wrapper#b > .container > .content > div > span:first-child {
    font-size: 35px;
    font-weight: bold;
    margin-bottom: 39px;
    line-height: normal;
}

main > .wrapper#b > .container > .content > div > ul {
    list-style-image: url(/resources/img/yellow_list_point.svg);
    font-size: 18px;
    font-weight: bold;
    padding-left: 17px;
    margin: 27px 0 0;
}

main > .wrapper#b > .container > .image {
    display: flex;
    justify-content: center;
}

main > .wrapper#b > .container > .image > img {
    width: 75%;
    margin-top: 92px;
}

/* C */

main > .wrapper#c {
    background: #7a6145;
}

main > .wrapper#c > .container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 76px 0 85px;
}

main > .wrapper#c > .container > .content {
    text-align: center;
    margin: 0 141px;
}

main > .wrapper#c > .container > .content > span {
    font-weight: bold;
    font-size: 35px;
}

main > .wrapper#c > .container > .content > div {
    text-align: left;
    margin-top: 39px;
    display: grid;
    grid-template-rows: auto 1fr;
    grid-row-gap: 30px;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 90px;
    font-size: 18px;
    line-height: 26px;
}

main > .wrapper#c > .container > .content > div a {
    color: var(--yellow-accent);
}

@media all and (max-width: 1500px) {
    main > .wrapper#a > .container > .content {
        margin: 0 50px 0 110px;
    }

    main > .wrapper#b > .container > .content {
        margin: 0 110px;
    }
}

@media all and (max-width: 1166px) {
    main > .wrapper#a {
        padding: 36px 0 0;
    }

    main > .wrapper#a > .container {
        flex-wrap: wrap;
    }

    main > .wrapper#a > .container > .content {
        margin: 0;
        padding: 0 12% 36px;
        width: 100%;
    }

    main > .wrapper#a > .container > .content > span:first-child {
        text-align: center;
        width: 100%;
    }

    main > .wrapper#a > .container > .image {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    main > .wrapper#b > .container > .content {
        grid-template-columns: auto;
        grid-template-rows: auto 1fr;
        grid-row-gap: 36px;
        margin: 0 12%;
    }

    main > .wrapper#b > .container > .image > img {
        width: 85%;
    }

    main > .wrapper#c > .container {
        padding: 54px 0 36px;
    }

    main > .wrapper#c > .container > .content {
        margin: 0 12%;
    }
}

@media all and (max-width: 816px) {

    main > .wrapper#c > .container > .content > div {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        grid-row-gap: 36px;
    }

    main > .wrapper#c > .container > .content > div > span:nth-child(2),
    main > .wrapper#c > .container > .content > div > span:nth-child(4) {
        order: 2;
    }
}

@media all and (max-width: 616px) {
    main > .wrapper#a > .container > .image > img {
        width: 100%;
    }

    main > .wrapper#b > .container > .image > img {
        margin-top: 36px;
        width: 95%;
    }

    main > .wrapper#a > .container > .content {
        padding: 0 15px 36px;
    }

    main > .wrapper#b > .container > .content {
        margin: 0 15px;
    }

    main > .wrapper#c > .container > .content {
        margin: 0 15px;
    }
}