// stylelint-disable max-nesting-depth, selector-max-compound-selectors

.metadata-add-container {
    margin: 30px;
    padding-top: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;

    .header-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        margin-bottom: 30px;

        .header,
        .explanation {
            width: 100%;
            margin-bottom: 30px;
        }

        .available-templates {
            width: 100%;
            font-weight: bold;
        }
    }

    .template-container {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    &.mobile {
        margin-top: 0;
        margin-left: 10px;
        margin-right: 10px;
        padding: 0;

        .header-container {
            flex-direction: column;
            align-items: flex-start;
            margin-bottom: 10px;

            .header {
                width: 100%;
            }
        }
    }
}
