@font-face {
    font-family: "PPMori";
    src: url("fonts/PPMori-Regular.otf");
}
@font-face {
    font-family: "PPMori-SemiBold";
    src: url("fonts/PPMori-SemiBold.otf");
}

.landing-page-wrapper {
    height: 100%;
    width: 100%;
}

.landing-page-wrapper,
.landing-page-wrapper * {
    box-sizing: border-box;
}

.landing-page-wrapper .container,
.landing-page-wrapper .container .container {
    width: 100%;
    padding-inline: 0.75rem;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
}
/* Bootstraps container width */
@media (min-width: 576px) { .landing-page-wrapper .container { max-width: 540px; } }
@media (min-width: 768px) { .landing-page-wrapper .container { max-width: 720px; } }
@media (min-width: 992px) { .landing-page-wrapper .container { max-width: 960px; } }
@media (min-width: 1200px) { .landing-page-wrapper .container { max-width: 1140px; } }
@media (min-width: 1400px) { .landing-page-wrapper .container { max-width: 1320px; } }

.landing-page-wrapper .main-content {
    container-type: inline-size;
    container-name: main-content;
}
@container main-content (min-width: 576px)  { .landing-page-wrapper .container .container { max-width: 540px; } }
@container main-content (min-width: 768px)  { .landing-page-wrapper .container .container { max-width: 720px; } }
@container main-content (min-width: 992px)  { .landing-page-wrapper .container .container { max-width: 960px; } }
@container main-content (min-width: 1200px) { .landing-page-wrapper .container .container { max-width: 1140px; } }
@container main-content (min-width: 1400px) { .landing-page-wrapper .container .container { max-width: 1320px; } }

.landing-page-wrapper .main-content {
    min-height: 100%;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    padding: 3rem 0;
}

.landing-page-wrapper img {
    max-height: 12.5rem;
    max-width: 100%;
}

.landing-page-wrapper .text-content {
    background-color: #CCC2B8;
    padding: 3rem 0;
    width: 100%;
    font-family: "PPMori";
}

.landing-page-wrapper .text-content .container {
    gap: 2rem;
}

.landing-page-wrapper .text-content h1 {
    --head-dash-height: 0.75rem;
    font-size: 3.75rem;
    font-weight: 550;
    font-family: "PPMori-SemiBold";
    margin: 0;
    margin-top: calc(var(--head-dash-height) + 0.5rem);
    position: relative;
}

.landing-page-wrapper .text-content h1::before {
    content: "";
    height: var(--head-dash-height);
    width: 4rem;
    background-color: black;
    position: absolute;
    top: calc((var(--head-dash-height) + 0.5rem) * -1);
    left: 0;
}

.landing-page-wrapper .text-content p {
    font-size: 1.8rem;
    line-height: 1.3em;
    margin: 0;
}

.landing-page-wrapper .text-content b {
    font-size: 1.8rem;
    font-family: "PPMori-SemiBold";
    margin: 0;
}

.landing-page-wrapper .text-content a {
    flex: 0;
    text-decoration: none;
    font-size: 1.8rem;
    color: white;
    background-color: black;
    padding: 1.3rem;
    align-self: flex-start;
}