* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
    scroll-padding-top: 70px;
    scroll-behavior: smooth;
}

body {
    font-family: "Cormorant Garamond", serif;
    background-color: #fff8f0;
    color: #3a2a1a;
}

img {
    max-width: 100%;
    display: block;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;

    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 72px;
    background-color: #7c0202;
}

header a {
    color: #fff8f0;
    text-decoration: none;
}

header > a {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
    font-size: 20px;
}

header img {
    width: 34px;
    height: 24px;
}

nav {
    display: flex;
    gap: 30px;
}

nav a {
    font-size: 17px;
    font-weight: 600;
}

nav a:hover {
    color: #ffd6a5;
}

main {
    overflow: hidden;
}

.banner {
    position: relative;
    min-height: 470px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 130px 14% 80px;
    color: #7c0202;
    text-align: center;
}

.banner img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 70%;
    z-index: -1;
}

.banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(255, 248, 240, 0) 0%,
        rgba(255, 248, 240, 0.466) 43%,
        rgba(255, 248, 240, 0) 65%
    );
    z-index: -1;
}

.banner h1 {
    width: 100%;
    max-width: 440px;
    line-height: 0.85;
}

.banner .small,
.banner .big {
    display: block;
}

.banner .small {
    font-size: 30px;
    color: #3a2a1a;
}

.banner .big {
    margin-top: 0;
    font-size: 72px;
    font-weight: 700;
}

.banner p {
    max-width: 360px;
    width: 100%;
    margin-top: 20px;
    margin-left: 40px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.6;
    color: #3a2a1a;
}

.chapter1,
.chapter2,
.chapter3,
.chapter4,
.chapter5,
.chapter6 {
    width: min(960px, calc(100% - 40px));
    margin: 18px auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    background-color: #fffaf2;
    border: 1px solid #ead9c2;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(75, 45, 20, 0.14);
}

.chapter1 {
    margin-top: 34px;
}

.chapter1 img,
.chapter2 img,
.chapter3 img,
.chapter4 img,
.chapter5 img,
.chapter6 img {
    width: 100%;
    height: 100%;
    min-height: 250px;
    object-fit: cover;
}

.chapter1 img,
.chapter3 img,
.chapter5 img {
    grid-column: 1;
    grid-row: 1 / 3;
}

.chapter1 h2,
.chapter1 p,
.chapter3 h2,
.chapter3 p,
.chapter5 h2,
.chapter5 p {
    grid-column: 2;
}

.chapter2 img,
.chapter4 img,
.chapter6 img {
    grid-column: 2;
    grid-row: 1 / 3;
}

.chapter2 h2,
.chapter2 p,
.chapter4 h2,
.chapter4 p,
.chapter6 h2,
.chapter6 p {
    grid-column: 1;
}

.chapter1 h2,
.chapter2 h2,
.chapter3 h2,
.chapter4 h2,
.chapter5 h2,
.chapter6 h2 {
    align-self: end;
    padding: 42px 42px 12px;
    font-size: 28px;
    color: #8b1111;
}

.chapter1 p,
.chapter2 p,
.chapter3 p,
.chapter4 p,
.chapter5 p,
.chapter6 p {
    padding: 0 42px 42px;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.7;
}

.quote-section {
    width: min(960px, calc(100% - 40px));
    margin: 34px auto;
    padding: 70px 24px;
    text-align: center;
    background-image: url("images/main_images_quote-bg.png");
    background-size: 104% 104%;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(75, 45, 20, 0.1);
}

.quote-section blockquote {
    max-width: 680px;
    margin: 0 auto;
}

.quote-section p {
    font-size: 30px;
    font-weight: 500;
    line-height: 1.35;
    color: #3a2a1a;
}

.quote-section p::before {
    content: "\201C";
    color: #c7a77a;
    font-size: 42px;
    font-weight: 700;
}

.quote-section p::after {
    content: "\201D";
    color: #c7a77a;
    font-size: 42px;
    font-weight: 700;
}

.characters {
    width: min(960px, calc(100% - 40px));
    margin: 42px auto;
    text-align: center;
}

.characters h2 {
    margin-bottom: 28px;
    font-size: 32px;
    color: #8b1111;
}

.characters > div {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 28px;
}

.characters figure {
    text-align: center;
}

.characters img {
    width: 120px;
    height: 120px;
    margin: 0 auto 14px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 8px 18px rgba(75, 45, 20, 0.12);
}

.characters h3 {
    margin-bottom: 8px;
    font-size: 20px;
    color: #8b1111;
}

.characters p {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
}

.gallery {
    width: min(960px, calc(100% - 40px));
    margin: 42px auto;
    text-align: center;
}

.gallery h2 {
    margin-bottom: 28px;
    font-size: 32px;
    color: #8b1111;
}

.gallery ul {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    list-style: none;
}

.gallery li {
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 8px 18px rgba(75, 45, 20, 0.12);
}

.gallery img {
    width: 100%;
    height: 105px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery li:hover img {
    transform: scale(1.08);
}

.about-project {
    width: min(960px, calc(100% - 40px));
    margin: 42px auto 70px;
    display: grid;
    grid-template-columns: 0.9fr 0.9fr;
    gap: 30px;
    align-items: center;
    text-align: left;
}

.about-project h2 {
    grid-column: 1 / -1;
    margin-bottom: 4px;
    text-align: center;
    font-size: 32px;
    color: #8b1111;
}

.about-project img {
    width: 78%;
    max-width: 340px;
    justify-self: end;
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(75, 45, 20, 0.14);
}

.about-project p {
    max-width: 360px;
    justify-self: start;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.7;
    text-align: center;
}

footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 14%;
    background-color: #7c0202;
    color: #fff8f0;
}

.footer-info {
    display: flex;
    align-items: center;
    gap: 24px;
}

.footer-info p {
    font-size: 16px;
    font-weight: 500;
}

.social-list {
    display: flex;
    align-items: center;
    gap: 18px;
    list-style: none;
}

.social-list a {
    display: flex;
    color: #fff8f0;
    transition: color 0.3s ease, transform 0.3s ease;
}

.social-list a:hover {
    color: #ffd6a5;
    transform: translateY(-2px);
}

.social-list svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

@media (max-width: 768px) {
    html {
        scroll-padding-top: 140px;
    }

    header {
        flex-direction: column;
        gap: 16px;
        padding: 16px 20px;
    }

    nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px 20px;
    }

    .banner {
        min-height: 520px;
        padding: 150px 24px 70px;
        align-items: center;
        text-align: center;
    }

    .banner .small {
        font-size: 26px;
    }

    .banner .big {
        font-size: 48px;
    }

    .banner p {
        margin-left: 0;
        max-width: 320px;
        font-size: 17px;
    }

    .chapter1,
    .chapter2,
    .chapter3,
    .chapter4,
    .chapter5,
    .chapter6 {
        grid-template-columns: 1fr;
    }

    .chapter1 img,
    .chapter2 img,
    .chapter3 img,
    .chapter4 img,
    .chapter5 img,
    .chapter6 img,
    .chapter1 h2,
    .chapter1 p,
    .chapter2 h2,
    .chapter2 p,
    .chapter3 h2,
    .chapter3 p,
    .chapter4 h2,
    .chapter4 p,
    .chapter5 h2,
    .chapter5 p,
    .chapter6 h2,
    .chapter6 p {
        grid-column: 1;
    }

    .chapter1 img,
    .chapter2 img,
    .chapter3 img,
    .chapter4 img,
    .chapter5 img,
    .chapter6 img {
        grid-row: auto;
    }

    .chapter1 h2,
    .chapter2 h2,
    .chapter3 h2,
    .chapter4 h2,
    .chapter5 h2,
    .chapter6 h2 {
        padding: 28px 24px 10px;
    }

    .chapter1 p,
    .chapter2 p,
    .chapter3 p,
    .chapter4 p,
    .chapter5 p,
    .chapter6 p {
        padding: 0 24px 32px;
    }

    .quote-section {
        padding: 34px 20px;
    }

    .quote-section p {
        font-size: 24px;
    }

    .characters > div {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 22px;
    }

    .characters img {
        width: 105px;
        height: 105px;
    }

    .gallery ul {
        grid-template-columns: repeat(2, 1fr);
    }

    .gallery img {
        height: 130px;
    }

    .about-project {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .about-project h2 {
        grid-column: 1;
    }

    .about-project img,
    .about-project p {
        justify-self: center;
    }

    footer,
    .footer-info {
        flex-direction: column;
        gap: 14px;
        text-align: center;
    }
}