.DiagFrontPage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;

    .ImageBlock {
        padding: 20px;
        display: flex;
        justify-content: center;

        .Image {
            width: 100%;
            height: 100%;
            aspect-ratio: 1 / 1;
            object-fit: cover;
        }
    }

    .ContentBlock {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        
        .TitleBox {
            display: grid;
            justify-content: center;
            justify-items: center;
            .SubTitle {
                color: var(--PrimaryColor);
                font-size: 25px;
                font-weight: bold;
            }
            .Title {
                color: #000;
                font-size: 50px;
                font-weight: bold;
            }
        }

        .CTAButtonBox {
            width: 70%;
            display: grid;
            gap: 20px;
            justify-content: center;
            justify-items: center;

            .TextContent {
                text-align: center;
            }
            .DiagButton {
                font-size: 20px;
            }
        }

        .AltButtonBox {
            display: grid;
            gap: 10px;
            justify-content: center;
            justify-items: center;

            margin-top: 20px;

            .TextContent {
                color: var(--SubText1);
            }
            .DiagButton{
                
            }
        }

        .FooterBox {
            display: grid;
            justify-content: center;
            gap: 5px;

            margin-top: 20px;

            .Footer_Link {
                font-size: 0.9em;
                font-weight: 300;
                color: var(--SubText1);
                text-align: center;
                
                text-decoration: none;
                transition: color 0.2s;

                &:hover {
                    color: var(--PrimaryColor);
                }

                &.CategoryLastElement {
                    margin-bottom: 10px;
                }
            }
        }
    }

}

@media (max-width: 1024px) {
    .DiagFrontPage {
        grid-template-columns: 1fr;

        .ImageBlock {
            .Image {
                width: 300px;
                max-width: 80%;
            }
        }
    
        .ContentBlock {
            gap: 30px;
            
            .TitleBox {
                .SubTitle {
                    font-size: 20px;
                }
                .Title {
                    font-size: 40px;
                }
            }
    
            .CTAButtonBox {
                width: 95%;
                
                .TextContent {
                    
                }
                button {
                    
                }
            }
    
            .AltButtonBox {
                .TextContent {
                    
                }
            }
        }
    }
}