.info-section {
    display: grid;
    grid-template-columns: repeat(5, minmax(380px, 1fr));

    width: 100%;
    min-height: 335px;

    overflow-x: auto;
    overflow-y: hidden;

    cursor: default;
}

.info-card {
    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 48px 52px 44px;

    color: #FFFFFF;
    text-align: center;

    cursor: default;
    user-select: none;
}

.info-card:nth-child(1) {
    background-color: #786757;
}

.info-card:nth-child(2) {
    background-color: #A18C79;
}

.info-card:nth-child(3) {
    background-color: #392D25;
}

.info-card:nth-child(4) {
    background-color: #786757;
}

.info-card:nth-child(5) {
    background-color: #4D4237;
}
.info-icon {
    width: 44px;
    height: 44px;

    margin-bottom: 10px;

    color: #FFFFFF;

    object-fit: contain;
}

div.info-icon {
    width: auto;
    height: auto;

    font-family: "Quicksand", sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 38px;
}
.info-card h2 {
    margin: 0 0 14px;

    color: #FFFFFF;

    font-family: "Quicksand", sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 22px;
    letter-spacing: 0;

    text-align: center;
}
.info-card p {
    margin: 0;

    color: #FFFFFF;

    font-family: "Quicksand", sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;

    text-align: center;
}
.button-row {
    display: flex;
    gap: 14px;

    margin-top: auto;
}
.about-section {
    position: relative;

    width: 100%;
    height: 1500px;

    overflow: hidden;

    color: #392D25;

    background:
        radial-gradient(
            circle at 3.6751302083333335% 6.940104166666666%,
            #A8987C 0%,
            11.55%,
            rgba(168, 152, 124, 0) 35%
        ),
        radial-gradient(
            circle at 92.96712239583333% 9.554036458333332%,
            #E2CA9E 0%,
            17.5%,
            rgba(226, 202, 158, 0) 35%
        ),
        radial-gradient(
            circle at 95.20670572916666% 90.48177083333333%,
            #B89775 0%,
            34.1%,
            rgba(184, 151, 117, 0) 55%
        ),
        radial-gradient(
            circle at 4.313151041666666% 93.34635416666667%,
            #EFD9CE 0%,
            29.9%,
            rgba(239, 217, 206, 0) 65%
        ),
        radial-gradient(
            circle at 46.555989583333336% 11.50390625%,
            rgba(255, 252, 252, 0.99) 0%,
            25%,
            rgba(255, 252, 252, 0) 50%
        ),
        radial-gradient(
            circle at 51.121419270833336% 89.98697916666667%,
            #A8987C 0%,
            42%,
            rgba(168, 152, 124, 0) 70%
        ),
        radial-gradient(
            circle at 48.9013671875% 49.521484375%,
            #FFFFFF 0%,
            100%,
            rgba(255, 255, 255, 0) 100%
        );
}
.about-section::before {
    content: "";

    position: absolute;
    top: -1px;
    left: 0;
    z-index: 10;

    width: 100%;
    height: 127px;

    background-image:
        url("../../assets/images/general/torn-edge-exact.png");

    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 100%;

    pointer-events: none;
}
.about-section::after {
    content: "";

    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    z-index: 2;

    width: 100%;
    height: 127px;

    background-image:
        url("../../assets/images/general/torn-edge-exact.png");

    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 100%;

    transform: rotate(180deg);

    pointer-events: none;
}
.about-tree {
    position: absolute;

    left: -430px;
    bottom: -40px;

    z-index: 1;

    width: 1000px;
    height: auto;

    object-fit: contain;

    pointer-events: none;
    user-select: none;
}
.about-girl {
    position: absolute;

    top: 1010px;
    left: 120px;

    z-index: 2;

    width: 500px;
    height: auto;

    object-fit: contain;

    pointer-events: none;
    user-select: none;
}
.about-feather {
    position: absolute;
    z-index: 4;

    width: 90px;
    height: auto;

    object-fit: contain;

    pointer-events: none;
    user-select: none;
}

.feather-1 {
    top: 120px;
    left: 13%;

    transform: rotate(120deg);
}

.feather-2 {
    top: 180px;
    right: 35%;

    width: 75px;

    transform: rotate(-50deg);
}

.feather-3 {
    top: 610px;
    left: 24%;

    width: 110px;

    transform: rotate(-65deg);
}

.feather-4 {
    top: 940px;
    right: 18%;

    width: 100px;

    transform: rotate(0deg);
}
.about-content {
    position: relative;
    z-index: 2;

    width: min(1500px, calc(100% - 70px));
    height: 100%;

    margin: 0 auto;
    padding: 128px 0 100px;
}
.about-heading,
.about-principle-heading {
    position: relative;

    width: fit-content;

    margin-right: auto;
    margin-left: auto;

    text-align: center;
}
.about-heading h2,
.about-principle-heading h2 {
    position: relative;
    z-index: 2;

    margin: 0;

    color: #49392F;

    font-family:
        "Palatino Linotype",
        Palatino,
        "Book Antiqua",
        serif;

    font-size: 40px;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0;

    text-align: center;
}
.about-heading span,
.about-principle-heading span {
    position: relative;
    z-index: 3;

    display: block;

    color: #A58876;

    font-family:
        "Snell Roundhand",
        cursive;

    font-size: 47px;
    font-weight: 400;
    font-style: italic;
    line-height: normal;
    letter-spacing: normal;

    text-align: center;
}
.about-heading span {
    margin-top: -22px;

    font-size: 52px;
}
.about-introduction {
    width: min(760px, calc(100% - 120px));

    margin: 132px auto 0;

    text-align: center;
}
.about-introduction p,
.about-principle-text p {
    margin: 0;

    color: #392D25;

    font-family: "Quicksand", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;

    text-align: center;
}

.about-introduction strong {
    font-weight: 700;
}
.about-principle-heading {
    margin-top: 76px;
}

.about-principle-heading span {
    margin-top: -18px;

    font-size: 47px;
}
.about-principle-text {
    width: min(820px, calc(100% - 180px));

    margin: 76px auto 0;

    text-align: center;
}

.about-principle-text p + p {
    margin-top: 22px;
}
.about-image-wrapper {
    position: absolute;

    top: 292px;
    right: -165px;

    width: 430px;
    height: 335px;

    overflow: hidden;

    border-radius:
        61% 39% 54% 46% /
        43% 57% 36% 64%;

    transform: rotate(-4deg);
}

.about-image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;
}
.about-buttons {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 22px;

    margin-top: 60px;
}