body {
    font-family: "Raleway", sans-serif;
}
h1 {
    font-family: "Montserrat", sans-serif;
}
/* Colors */
.text-off-white {
    color: #faf7f7;
}
.border-off-white {
    border-color: #faf7f7;
}
.text-off-white-button:hover {
    color: #000000;
    background-color: #faf7f7;
}
.text-color-black {
    color: #251f2c;
}
.bg-color-black {
    background-color: #251f2c;
}
.holder::placeholder {
    color: #251f2c;
}
.border-color-black {
    border-color: #251f2c;
}
.hover-gold:hover {
    color: #251f2c;
    background-color: #be9b50;
}

.bg-gold-color {
    background-color: #be9b50;
}
.text-gold-color {
    color: #be9b50;
}
.border-gold-color {
    border-color: #be9b50;
}
.border-color-gray {
    border-color: #d2d3d7;
}
.bg-peach {
    background-color: #f2e6cc;
}

/*  hover */
.text-hr:hover {
    color: #be9b50;
}
.hover-gold:hover {
    background-color: #be9b50;
    color: #251f2c;
}
.subscribe-btn:hover {
    background: #251f2c;
    color: #f2e6cc;
}

/* ---- grid ---- */
.height {
    height: 2000px;
}

.grid:after {
    content: "";
    display: block;
    clear: both;
}
.grid-item--img1 {
    width: 1017px;
    height: 716px;
    position: absolute;
    left: 0%;
    top: 0px;
}
.grid-item--img2 {
    width: 507px;
    height: 512px;

    position: absolute;
    right: 0%;
    top: 0px;
}

.grid-item--img3 {
    width: 627px;
    height: 733px;
    position: absolute;
    left: 0%;
    top: 732.99px;
}

.grid-item--img4 {
    width: 372px;
    height: 358px;
    position: absolute;
    left: 42%;
    top: 733.25px;
}

.grid-item--img5 {
    width: 506px;
    height: 562px;
    position: absolute;
    right: 0%;
    top: 528.98px;
}

.grid-item--img6 {
    width: 625.5px;
    height: 503px;
    position: absolute;
    left: 0%;
    top: 1488px;
}

.grid-item--img7 {
    width: 891px;
    height: 891px;
    position: absolute;
    right: 0%;
    top: 1101px;
    height: 891px;
}

@media (min-width: 1020px) and (max-width: 1300px) {
    .height {
        height: 1564px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .grid:after {
        content: "";
        display: block;
        clear: both;
    }
    .grid-item--img1 {
        width: 647px;
        height: 500px;
        position: absolute;
        left: 0%;
        top: 0px;
    }
    .grid-item--img2 {
        width: 325px;
        height: 345px;
        position: absolute;
        right: 0%;
        top: 0px;
    }

    .grid-item--img3 {
        width: 389px;
        position: absolute;
        left: 0%;
        top: 511.99px;
        height: 631px;
    }

    .grid-item--img4 {
        width: 250px;
        height: 252px;
        position: absolute;
        left: 397.25px;
        top: 512px;
    }

    .grid-item--img5 {
        width: 324px;
        height: 408px;
        position: absolute;
        right: 0%;
        top: 355.98px;
    }

    .grid-item--img6 {
        width: 389px;
        height: 373px;
        position: absolute;
        left: 0%;
        top: 1163px;
    }

    .grid-item--img7 {
        width: 586px;
        position: absolute;
        right: 0%;
        top: 777px;
        height: 759px;
    }
    .img-10 {
        height: 500px;
    }
}
@media (min-width: 1300px) and (max-width: 1400px) {
    .height {
        height: 1643px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .grid:after {
        content: "";
        display: block;
        clear: both;
    }
    .grid-item--img1 {
        width: 805px;
        height: 550px;
        position: absolute;
        left: 0%;
        top: 0px;
    }
    .grid-item--img2 {
        width: 416px;
        height: 411px;
        position: absolute;
        right: 0%;
        top: 0px;
    }

    .grid-item--img3 {
        width: 470px;
        position: absolute;
        left: 0%;
        top: 562.99px;
        height: 560px;
    }

    .grid-item--img4 {
        width: 311px;
        height: 321px;
        position: absolute;
        left: 492px;
        top: 562px;
    }

    .grid-item--img5 {
        width: 415px;
        height: 453px;
        position: absolute;
        right: 0%;
        top: 429.98px;
    }

    .grid-item--img6 {
        width: 469.5px;
        height: 501px;
        position: absolute;
        left: 0%;
        top: 1136px;
    }

    .grid-item--img7 {
        width: 749px;
        position: absolute;
        right: 0%;
        top: 902px;
        height: 735px;
    }
    .img-10 {
        height: 1500px;
    }
}
@media (min-width: 1400px) and (max-width: 1540px) {
    .height {
        height: 1799px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .grid:after {
        content: "";
        display: block;
        clear: both;
    }
    .grid-item--img1 {
        width: 842px;
        height: 543px;
        position: absolute;
        left: 0%;
        top: 0px;
    }
    .grid-item--img2 {
        width: 376px;
        position: absolute;
        right: 0%;
        height: 432px;
        top: 0px;
    }

    .grid-item--img3 {
        width: 470px;
        position: absolute;
        left: 0%;
        top: 562.99px;
        height: 755px;
    }

    .grid-item--img4 {
        width: 350px;
        height: 321px;
        position: absolute;
        left: 492px;
        top: 562px;
    }

    .grid-item--img5 {
        width: 376px;
        height: 444px;
        position: absolute;
        right: 0%;
        top: 445.98px;
    }

    .grid-item--img6 {
        width: 468px;
        height: 457px;
        position: absolute;
        left: 0%;
        top: 1337px;
    }

    .grid-item--img7 {
        width: 749px;
        position: absolute;
        right: 0%;
        top: 902px;
        height: 891px;
    }
    .img-10 {
        height: 1471px;
    }
}
@media (min-width: 814px) and (max-width: 1020px) {
    .height {
        height: 1018px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .grid:after {
        content: "";
        display: block;
        clear: both;
    }
    .grid-item--img1 {
        width: 487px;
        height: 314px;
        position: absolute;
        left: 0%;
        top: 0px;
    }
    .grid-item--img2 {
        width: 232px;
        position: absolute;
        right: 0%;
        top: 0px;
        height: 234px;
    }

    .grid-item--img3 {
        width: 302px;
        position: absolute;
        left: 0%;
        top: 325.9px;
        height: 369px;
    }

    .grid-item--img4 {
        width: 166px;
    height: 169px;
    position: absolute;
    left: 321px;
    top: 326px;

    }

    .grid-item--img5 {
        width: 232px;
        height: 256px;
        position: absolute;
        right: 0%;
        top: 241.98px;
    }

    .grid-item--img6 {
        width: 302px;
        height: 272px;
        position: absolute;
        left: 0%;
        top: 715px;
    }

    .grid-item--img7 {
        width: 407px;
        position: absolute;
        right: 0%;
        top: 510px;
        height: 478px;
    }

}
@media (min-width: 768px) and (max-width: 814px) {
    .height {
        height: 1018px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .grid:after {
        content: "";
        display: block;
        clear: both;
    }
    .grid-item--img1 {
        width: 480px;
        height: 314px;
        position: absolute;
        left: 0%;
        top: 0px;
    }
    .grid-item--img2 {
        width: 232px;
        position: absolute;
        right: 0%;
        top: 0px;
        height: 234px;
    }

    .grid-item--img3 {
        width: 281px;
        position: absolute;
        left: 0%;
        top: 325.9px;
        height: 369px;
    }

    .grid-item--img4 {
        width: 194px;
    height: 169px;
    position: absolute;
    left: 288px;
    top: 326px;

    }

    .grid-item--img5 {
        width: 232px;
        height: 256px;
        position: absolute;
        right: 0%;
        top: 241.98px;
    }

    .grid-item--img6 {
        width: 280px;
        height: 272px;
        position: absolute;
        left: 0%;
        top: 705px;
    }

    .grid-item--img7 {
        width: 441px;
        position: absolute;
        right: 0%;
        top: 510px;
        height: 467px;
    }

}