* {
    margin: 0;
    padding: 0;
}

.page {
    width: 1080px;
    height: 1920px;
    overflow: hidden;
    position: relative;
}

.page--bg,
.page--pattern,
.page--bg--overlay,
.page--border,
.page--content {
    position: absolute;
    width: 1080px;
    height: 1920px;
}

.page--bg {
    object-fit: cover;
}

.page--content {
    overflow: hidden;
}

/* ================================================================== */
/* ============================== BORDER ============================ */
.template__D .page--border__off,
.template__E .page--border__off,
.template__F .page--border__off,
.template__G .page--border__off,
.template__H .page--border__off {
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    z-index: -1 !important;
    visibility: hidden !important;
}

/* ================================================================== */
/* ============================= OVERLAY ============================ */

.template__C .page--bg--overlay {
    width: 0;
    height: 0;
    opacity: 0;
    z-index: -1;
    visibility: hidden;
}

.page--bg--overlay__off {
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    z-index: -1 !important;
    visibility: hidden !important;
}

.template__D .page--bg--overlay__ig,
.template__E .page--bg--overlay__ig,
.template__F .page--bg--overlay__ig,
.template__G .page--bg--overlay__ig,
.template__H .page--bg--overlay__ig {
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    z-index: -1 !important;
    visibility: hidden !important;
}

/* ================================================================== */
/* ============================= PATTERN ============================ */

.page--pattern__off {
    width: 0;
    height: 0;
    opacity: 0;
    z-index: -1;
    visibility: hidden;
}

/* ================================================================== */
/* =========================== BACKGROUND =========================== */

.template__A .page--bg {
    height: 1750px;
}

.template__B .page--bg {
    height: 1620px;
}

.template__C .page--bg {
    height: 1300px;
}

/* ================================================================== */
/* ============================ HEADINGS ============================ */

.page--heading {
    position: absolute;

    font-weight: normal;
    font-style: normal;
    font-family: 'luzankydisplay', 'Poppins', sans-serif;

    color: #fff;

    height: 300px;
}

.page--heading__poppins {
    font-weight: 700;
    font-family: 'Poppins', 'luzankydisplay', sans-serif;
}

.page--heading > div {
    height: 100%;
    position: relative;
}

.page--heading > div > span {
    position: absolute;
    bottom: 0;
    line-height: 1.3;
}

/* ================================================================== */
/* ================== TEMPLATE - STORIES (A, B, C) ================== */
.template__A .page--heading,
.template__B .page--heading,
.template__C .page--heading {
    font-size: 80px;

    width: 700px;
}

.template__A .page--heading__sm,
.template__B .page--heading__sm,
.template__C .page--heading__sm {
    font-size: 60px;
}

/* ================================================================== */
/* ======================= TEMPLATE - STORY A ======================= */
.template__A .page--heading {
    left: 193px;
    bottom: 366px;
    height: 1150px;
}

/* ================================================================== */
/* ======================= TEMPLATE - STORY B ======================= */
.template__B .page--heading {
    left: 162px;
    bottom: 547px;
    height: 775px;

    transform: rotate(-8.5deg);
}

/* ================================================================== */
/* ======================= TEMPLATE - STORY C ======================= */
.template__C .page--heading {
    color: #006bcc;

    left: 115px;
    top: 1270px;
    height: 500px;

    transform: rotate(-13.5deg);
}

.template__C .page--heading > div > span {
    top: 0;
}

/* ================================================================== */
/* ================== TEMPLATE - POSTS (D, E, F) ==================== */
.template__D.page,
    /**/
.template__E.page,
    /**/
.template__F.page {
    width: 1080px;
    height: 1080px;
}

.template__D .page--bg,
.template__D .page--pattern,
.template__D .page--bg--overlay,
.template__D .page--border,
.template__D .page--content,
    /**/
.template__E .page--bg,
.template__E .page--pattern,
.template__E .page--bg--overlay,
.template__E .page--border,
.template__E .page--content,
    /**/
.template__F .page--bg,
.template__F .page--pattern,
.template__F .page--bg--overlay,
.template__F .page--border,
.template__F .page--content {
    width: 1080px;
    height: 1080px;
}

.template__D .page--heading,
.template__E .page--heading,
.template__F .page--heading {
    font-size: 80px;

    width: 700px;

    left: 170px;
    bottom: 230px;
    height: 775px;

    transform: rotate(-7.3deg);
}

.template__D .page--heading__sm,
.template__E .page--heading__sm,
.template__F .page--heading__sm {
    font-size: 60px;
}

/* ================================================================== */
/* ===================== TEMPLATE - TIMELINE G ====================== */
.template__G.page,
.template__G .page--bg,
.template__G .page--pattern,
.template__G .page--bg--overlay,
.template__G .page--border,
.template__G .page--content {
    width: 1200px;
    height: 630px;
}

.template__G .page--heading {
    font-size: 51px;

    width: 440px;

    left: 330px;
    bottom: 100px;
    height: 450px;

    transform: rotate(-8.5deg);
}

.template__G .page--heading__sm {
    font-size: 39px;
}

/* ================================================================== */
/* =--==================== TEMPLATE - COVER H ======================- */
.template__H.page,
.template__H .page--bg,
.template__H .page--pattern,
.template__H .page--bg--overlay,
.template__H .page--border,
.template__H .page--content {
    width: 820px;
    height: 360px;
}

.template__H .page--heading {
    font-size: 33px;

    width: 300px;

    left: 234px;
    bottom: 50px;
    height: 270px;

    transform: rotate(-8.5deg);
}

.template__H .page--heading__sm {
    font-size: 25px;
}

/* ================================================================== */

.template__C .page--heading.text--primary {
    color: #006bcc;
}

.template__C .page--heading.text--secondary {
    color: #e04221;
}

.template__C .page--heading.text--tertiary {
    color: #e5bf1c;
}

.template__C .page--heading.text--quaternary {
    color: #eda375;
}

.template__C .page--heading.text--quinary {
    color: #91c861;
}

.template__C .page--heading.text--labyrint {
    color: #b1a9d4;
}

.template__C .page--heading.text--lampa-lany {
    color: #96cfc1;
}

.template__C .page--heading.text--lata {
    color: #f6b4b2;
}

.template__C .page--heading.text--legato {
    color: #a29dac;
}

.template__C .page--heading.text--lesna {
    color: #72ac74;
}

.template__C .page--heading.text--lidicka {
    color: #e7a91e;
}

.template__C .page--heading.text--linka {
    color: #bebbb7;
}

.template__C .page--heading.text--liska {
    color: #f39562;
}

.template__C .page--heading.text--louka {
    color: #93c462;
}

.template__C .page--heading.text--lumik {
    color: #ef7d18;
}

.template__C .page--heading.text--lyska {
    color: #a29dac;
}

.template__C .page--heading.text--lorien {
    color: #92c8ee;
}

.template__C .page--heading.text--klokani {
    color: #eb803f;
}

.template__C .page--heading.text--l-caffe {
    color: #4c3a34;
}

.template__C .page--heading.text--lentilka-zluta {
    color: #efb40f;
}

.template__C .page--heading.text--lentilka-modra {
    color: #4ccff2;
}

.template__C .page--heading.text--lentilka-cervena {
    color: #ef2039;
}