/*
 *  Copyright 2018 Adobe Systems Incorporated
 *
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */
/* WKND teaser - default.less*/

$slide-height: 700px;
$slide-mobile-height: 400px;
$slide-content-width: 450px;

.cmp-teaser--slide {

    .cmp-teaser {
        min-height: $slide-height;
        position: relative;
        overflow: hidden;

        @media (max-width: $screen-small) {
            min-height: $slide-mobile-height;
        }

        .cmp-image__image {
            height: $slide-height;
            object-fit: cover;
            object-position: top;
            width: 100%;
            padding: 0;
            margin: 0;

            @media (max-width: $screen-small) {
                opacity: 0.75;
            }
        }

        .cmp-teaser__content {
            @include container-content();
            left: 0;
            right: 0;
            position: absolute;
            left: $gutter-padding * 2;
            bottom: 8em;

            @media (max-width: $screen-medium) {
                top: 8em;
            }

            @media (max-width: $screen-small) {
                top: 8em;
                left: 0;
                text-align: center;
            }

        }

        .cmp-teaser__title {
            font-family: $font-family-serif;
            width: 100%;
            color: $teaser-dark-color;
            bottom: 20px;
            font-size: $font-size-h1;
            max-width: $slide-content-width - 100;

            @media (max-width: $screen-small) {
                max-width: 100%;
            }
        }

        .cmp-teaser__description {
            color: $gray;
            font-size: $font-size-small;
            margin-bottom: 2em;
            max-width: $slide-content-width;

            @media (max-width: $screen-small) {
                max-width: 100%;
            }
        }

        .cmp-teaser__action-link {
            background-color: $brand-primary;
            text-transform: uppercase;
            font-size: $font-size-small;
            padding: 0.75em 3.5em;
            margin-top: 0.5em;
            font-weight: $font-weight-bold;
        }
    }
}