main > .header-container {
    text-align: center;
    margin-bottom: 2rem;
}

main > .header-container > h1 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    margin-top: 2rem;
}

main > .header-container > .subheader {
    font-size: 1.5rem;
    margin-bottom: 2rem;
}

main > .header-container > .button {
    width: 100%;
    line-height: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;
    background-color: #33FFAA;
    color: black;
}

main > .logos-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

main > .logos-container > .logo-container > img {
    width: 100%;
}

main > .feature-summaries-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

main > .feature-summaries-container > .feature-summary {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    border-radius: 0.5rem;
    background-color: rgba(0, 0, 0, 0.05);
    flex: 1;
}

main > .feature-summaries-container > .feature-summary > .title {
    font-weight: bold;
}

main > .feature-summaries-container > .feature-summary > .link {
    display: block;
    text-align: right;
}

main > .secondary-actions-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 2rem;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

main > .secondary-actions-container > .top-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

main > .secondary-actions-container > .top-container > .secondary-button {
    width: 100%;
}

main > .features-container > .feature {
    margin-top: 2rem;
}

main > .features-container > .feature > .top-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: flex-end;
    margin-bottom: 2rem;
}

main > .features-container > .feature > .top-container > .left-container > h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

main > .features-container > .feature > .top-container > .left-container > .description {
    font-size: 1.5rem;
}

main > .features-container > .feature > .top-container > .right-container {
    width: 100%;
}

main > .features-container > .feature > .top-container > .right-container > .secondary-button {
    width: 100%;
}

main > .features-container > .feature > .bottom-container {
    flex: 1;
    border-radius: 0.5rem;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

main > .features-container > .feature > .bottom-container > .feature-component  {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

main > .features-container > .feature > .bottom-container > .feature-component:last-child  {
    border-bottom: none;
}

main > .features-container > .feature > .bottom-container > .feature-component > .left-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

main > .features-container > .feature > .bottom-container > .feature-component > .left-container > h3 {
    font-weight: bold;
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 0;
}
main > .features-container > .feature > .bottom-container > .feature-component > .left-container > .link {
    margin-top: auto;
}

main > .features-container > .feature > .bottom-container > .feature-component > .right-container {
    flex: 3;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    justify-content: center;
    pointer-events: none;
}

main > .features-container > .feature > .bottom-container > .feature-component > .right-container > .title {
    font-size: 1.25rem;
    font-weight: bold;
}

main > .get-started-container {
    text-align: center;
    margin-top: 4rem;
    margin-bottom: 4rem;
}

main > .get-started-container > h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

main > .get-started-container > .description {
    font-size: 1.5rem;
    margin-bottom: 2rem;
}

main > .get-started-container > .button {
    width: 100%;
}

/* Overrides */

.chart-insight {
    margin-top: 0;
    margin-bottom: 0;
}

.timeline {
    margin-top: 1rem;
    margin-bottom: 0;
}

.alert {
    margin-top: 0rem;
    margin-bottom: 0;
}

.visit > .left-container > .agent-name-container > .agent-authentication-container > .hover-content.hidden {
    display: revert;
}

@container (min-width: 60rem) {
    main > .header-container {
        margin-bottom: 4rem;
    }

    main > .header-container > h1 {
        font-size: 4rem;
        line-height: 4rem;
        padding-left: 4rem;
        padding-right: 4rem;
    }

    main > .header-container > .subheader {
        padding-left: 8rem;
        padding-right: 8rem;
    }
    
    main > .header-container > .button {
        width: revert;
    }

    main > .logos-container {
        display: flex;
        gap: 2rem;
    }
    
    main > .logos-container > .logo-container {
        height: 1.5rem;
    }

    main > .logos-container > .logo-container > img {
        width: revert;
        height: 100%;
    }

    main > .feature-summaries-container {
        flex-direction: row;
        gap: 2rem;
    }

    main > .secondary-actions-container {
        flex-direction: row;
    }

    main > .secondary-actions-container > .top-container {
        flex-direction: row;
        width: revert;
    }
    
    main > .secondary-actions-container > .top-container > .secondary-button {
        width: revert;
    }

    main > .features-container > .feature > .top-container {
        flex-direction: row;
        gap: 10rem;
    }
    
    main > .features-container > .feature > .top-container > .right-container {
        width: revert;
    }
    
    main > .features-container > .feature > .top-container > .right-container > .secondary-button {
        width: revert;
    }

    main > .features-container > .feature > .bottom-container > .feature-component  {
        flex-direction: row;
    }

    main > .features-container > .feature > .bottom-container > .feature-component > .left-container {
        border-bottom: revert;
        border-right: 1px solid rgba(0, 0, 0, 0.2);
        padding: 2rem;
    }

    main > .features-container > .feature > .bottom-container > .feature-component > .right-container {
        padding: 2rem;
    }

    main > .get-started-container > .button {
        width: revert;
    } 
    
    /* Overrides */
    
    .session-row {
        gap: 2rem;
    }

    .session-row > .left-container {
        width: revert;
        flex: 1;
    }

    .session-row > .right-container {
        width: revert;
        flex: 1;
    }
}