.container
{
    @include page-container;
}

.contents
{
    @include column-container;
}

.content
{
    @include content-padding;

    &.primary
    {
        @include two-thirds-column;

        @include for-desktops
        {
            padding-right: 2%;
        }
    }

    &.secondary
    {
        margin-top: steps(4);
        margin-bottom: steps(-2);

        @include for-at-least-normal-tablets
        {
            margin-top: steps(5);
            margin-bottom: 0;
        }

        @include for-desktops
        {
            margin-top: 0;
        }

        main > .container:last-child &
        {
            margin-bottom: steps(-4); // neutralize `<main>` element bottom margin

            @include for-desktops
            {
                margin-bottom: 0;
            }
        }
    }
}

main
{
    margin-top: steps(3);
    margin-bottom: steps(4);

    @include for-at-least-normal-tablets
    {
        margin-top: steps(7);
        margin-bottom: steps(10);
    }
}

main > .head
{
    @include background-overlay;

    padding-top: steps(2);
    padding-bottom: steps(2);
    margin-top: steps(-3);
    margin-bottom: steps(3);

    .content
    {
        @include optimal-measure;
    }

    .heading
    {
        @include extra-large-heading;

        display: flex;
        align-items: flex-end;
        min-height: steps(26);
        margin: 0;

        // make text lighter only when background set
        // so text is readable even without javascript enabled
        .js &
        {
            @include antialiasing;

            color: $color-background-lightest;
        }

        @include for-at-least-normal-tablets
        {
            display: block;
            min-height: 0;
        }
    }

    .action
    {
        @include button-set;

        margin-top: steps(2);
        margin-bottom: steps(1);

        @include for-at-least-tablets
        {
            margin-top: steps(1);
            margin-bottom: 0;
        }

        @include for-at-least-normal-tablets
        {
            margin-top: steps(4);
        }
    }

    @include for-at-least-normal-tablets
    {
        display: flex;
        align-items: flex-end;

        height: 52vh;
        max-height: steps(65);
        min-height: steps(30);

        padding-top: steps(4);
        padding-bottom: steps(4);
        margin-bottom: steps(7);
        margin-top: steps(-7);

        .container
        {
            width: 100%;
        }
    }
}

// hide radio button switchable blocks
.js [data-trigger-name]:not(.selected)
{
    display: none !important;
}

.embed-container {
    width: 100%;

    .content {
        padding: 0;
    }
}