body {
    inline-size: 100svw;
    block-size: 100svh;
    display: grid;
    background: rgb(250, 250, 250);
    overflow: hidden;
}

main {
    grid-template: 1fr 5rem / 1fr;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-timeline: --fadeTimeline vertical;
}

.main {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    padding: 1rem .5rem;
}

.page-title {
    block-size: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    & > .logo {
        inline-size: 15rem;
        margin: 5rem auto 0;
        opacity: 0;
        scale: .9;
        animation: fade-in 1.3s .5s forwards;
    }
    & > .shield {
        inline-size: 3rem;
        margin: 0 auto;
        opacity: 0;
        scale: .9;
        animation: fade-in 1.3s .75s forwards;
    }
    .arrow-down {
        inline-size: 4rem;
        block-size: 4rem;
        margin: 2rem auto 5rem;
        border-bottom: 4px solid rgb(200, 200, 200);
        border-left: 4px solid rgb(200, 200, 200);
        border-radius: 4px;
        rotate: -45deg;
        animation: pulse 3s ease-in-out infinite;
    }
}

.quoteText {
    max-inline-size: 35rem;
    font-size: 1.25rem;
    text-align: center;
    font-style: italic;
    margin: 0 auto 10rem;
    opacity: 0;
    animation: fade linear forwards;
    animation-timeline: view();
    animation-range-start: 150px;
    animation-range-end: 500px;
}

.footer {
    margin: 0 .5rem 1rem;
    display: grid;
    grid-template: 1fr / 1fr 1fr;
    padding: .5rem;
    font-size: .9rem;
    background: rgb(2, 144, 228);
    color: white;
    border-radius: 7px;
}

.card-container {
    inline-size: 100%;
    min-block-size: 10rem;
    margin-bottom: 10rem;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.card {
    max-inline-size: 40rem;
    border-radius: 7px;
    background: white;
    outline: 1px solid rgb(230, 230, 230);
    box-shadow: 2px 2px 15px 1px rgba(0, 0, 0, .3);
    scale: .8; 
    opacity: 0;
    animation: fade-in linear forwards;
    animation-timeline: view();
    animation-range-start: 50px;
    animation-range-end: 400px;
    & > img {
        inline-size: 100%;
        block-size: 7rem;
        border-top-right-radius: 7px;
        border-top-left-radius: 7px;
        object-fit: cover;
        object-position: 0% 50%;
    }
    & > div {
        padding: 1rem;
        & > h2 {
        text-align: center;
        padding: 1rem 0;
        }
    }
    
}

.grid-left {
    grid-row: 1;
    grid-column: 1;
}

.grid-right {
    grid-row: 1;
    grid-column: 2;
    margin: auto 0 0;
}

.icon {
    width: 1rem;
    height: 1rem;
    max-width: 1rem;
    max-height: 1rem;
    stroke:white;
}

@media screen and (min-width: 768px) {
    .page-title {
        & > .logo {
            inline-size: 30rem;
        }
        & > .shield {
            inline-size: 5rem;
        }
    }

    .quoteText {
        margin: 0 auto 25rem;
        font-size: 1.5rem;
        animation-range-start: 200px;
        animation-range-end: 700px;
    }

    .card-container {
        margin-top: 3rem;
    }

    .card {
        max-inline-size: 90%;
        display: grid;
        grid-template: 1fr / 45% 1fr;
        & > img {
            grid-row: 1;
            grid-column: 1;
            block-size: 100%;
            border-top-left-radius: 7px;
            border-top-right-radius: 0;
            border-bottom-left-radius: 7px;
        }
    }
    
    .landscape-reverse {
        grid-template: 1fr / 1fr 45%;
        margin: 0 0 0 auto;
        & > img {
            grid-column: 2;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            border-top-right-radius: 7px;
            border-bottom-right-radius: 7px;
        }
    }
    
    .footer div p {
        margin-left: 0.5rem;
    }
}

@media screen and (min-width: 992px) {    
    .page-title {
        .logo {
            inline-size: 40rem;
        }
    }

    .quoteText {
        margin: 0 auto 15rem;
    }

    .card-container {
        gap: 2rem;
    }

    .card {
        max-inline-size: 45rem;
    }
    
    .footer {
        max-width: 40rem;
        margin: 0 auto 1rem;
        box-shadow: 2px 2px 15px 1px rgba(0, 0, 0, .3);
    }

    .footer div p {
        margin-left: 1.5rem;
    }
}

@media screen and (min-width: 1280px) {
    .main {
        max-inline-size: 90%;
        margin-inline: auto;
        gap: 2rem;
    }

    .card-container {
        inline-size: 100%;
        flex-direction: column;
    }

    .card {
        max-inline-size: 60rem;
    }
}

@media screen and (min-width: 1920px) {
}


@keyframes pulse {
    0% {opacity: .1}
    50% {opacity: 1}
    100% {opacity: .1}
}

@keyframes fade-in {
    to { scale: 1; opacity: 1 }
}

@keyframes fade {
    to {opacity: 1}
}