@charset "utf-8";
@layer theme, base, layout;
@import "_theme.css" layer(theme);
@import "_base.css" layer(base);

@layer layout {
    
    main {
        padding: 2.6rem 0;

        display: flex;
        flex-flow: column;
        gap: 5.2rem;
    }
    
    .intro {
        padding-top: 8.0rem;
    }

    /* Intro */
    
    .intro h1 {
        font-family: "Domine", serif;
        font-size: 4.7rem;
        font-weight: 400;
        line-height: 1.0;
        
        display: flex;
        flex-flow: column;
        gap: 1.9rem;
    }
    
    /* Apps */

    .app {
        margin: 0 -8.8rem;
        min-height: 50.0rem;
        padding: 2.6rem 8.8rem;
        
        display: flex;
        flex-flow: column;
        align-items: center;
        gap: 1.4rem;
    }

    .app .photo {
        width: 100vw;
        object-fit: cover;
    }

    .app section {
        width: 50%;
        margin-left: auto;
        
        display: flex;
        align-items: center;
        gap: 1.1rem;
    }
    
    .app section figure,
    .app section .icon {
        width: 5.7rem;
        height: 5.7rem;
        object-fit: contain;
    }
    
    .app hgroup {
        flex-grow: 2;
        display: flex;
        flex-flow: column;
        gap: 0.7rem;
    }
    
    .app h1 {
        font-size: 1.7rem;
        font-weight: 700;
        line-height: 1.0;
    }
    
    .app h2 {
        font-size: 1.5rem;
        font-weight: 400;
        line-height: 1.0;
    }

    .app .store a {
        display: flex;
    }
    
    .app .store img {
        width: 15.5rem;
    }

    /* .app.weeklet {
        background: url(/assets/image-weeklet.jpg) no-repeat;
        background-size: cover;
        background-position: left;
    } */
}