#homepage {
    #hero {
        background-color: #0D130F;
        height: 480px;
        padding: 80px;
        background-image: url("/assets/pages/hero-bg-8ed05dac.png");
        background-size: contain;
        background-position: right;
        background-repeat: no-repeat;
    }

    #hero-content {
        max-width: 1240px;
        margin: auto;
        display: grid;
        grid-template-columns: 1.4fr 1fr;
        gap: 80px;
        height: 100%;

        h1 {
            font-size: 40px;
            text-transform: uppercase;
            font-weight: 500;
            margin: auto;
            margin-bottom: 16px;
        }
        .subtitle {
            font-family: "Oxanium", sans-serif;
            font-size: 24px;
            font-weight: 100;
        }

        #latest-post-col {
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
        }
        .latest-post {
            background-color: rgba(43, 53, 42, 0.97);
            border-radius: 16px;
            padding: 32px 24px;

            .tag {
                font-family: "Oxanium", sans-serif;
                color: var(--primary-500);
                font-size: 20px;
                margin-bottom: 12px;
            }

            .title {
                font-size: 24px;
                margin-bottom: 10px;
            }

            .date {
                font-family: "Oxanium", sans-serif;
                color: #9FA89B;
                font-size: 16px;
                margin-bottom: 24px;
            }
        }
    }
}