@include breakpoint(tile-max-96px) {
    .tile {
        &-title {
            h2 {
                font-size: 20px;   
                line-height: 0.8rem;
            }
        }
        &-frame {
            height: 100vh;
        }
        &-content {
            padding: $unit-2;
        }
        &-icon {
            display: none;
        }
        &-footer {
            margin: 0;
        }
    }
}
@include breakpoint(tile-min-96px) {
    .tile {
        &-title {
            h2 {
                font-size: 15vh;   
                line-height: 10vh;
            }
        }
        &-frame {
            height: 100vh;
        }
        &-content {
            padding: $unit-2;
        }
        &-subtitle {
            div, p {
                line-height: 0.7rem;
            }
        }
        &-icon {
            display: block;
        }
        &-footer {
            margin: 0;
        }
    }
}
@include breakpoint(tile-min-132px) {
    .tile {
        &-title {
            h2 {
                font-size: 32px;  
                line-height: 1rem;
            }
        }
        &-subtitle {
            div, p {
                line-height: 0.9rem;
                font-size: $font-size;
            }
        }
    }
}

@include breakpoint(tile-min-240px) {
    .tile {
        &-title {
            h2 {
                font-size: 42px;  
                line-height: 1.3rem;
            }
        }
        &-subtitle {
            div, p {
                line-height: 1.3rem;
                font-size: $font-size-lg;
            }
        }
    }
}

@include breakpoint(tile-max-280px) { 
    .tile {

        &-title {
            h2 {
                font-size: 16px;
            }
        }
        &-subtitle {
            div, p {
                line-height: 0.8rem;
                font-size: $font-size * 0.8;
            }
        }
    }

    .overlay {
        &-frame {
            height: 100%;
            width: 100%; 
        }
        &-title {
            h2 {
                font-size: 15px;
            }
        }
    }
}
@include breakpoint(tile-min-281px) { 
    .tile {
        &-title {
            h2 {
                font-size: 18px;
            }
        }
        &-subtitle {
            div, p {
                line-height: 1rem;
                font-size: $font-size * 0.9;
            }
        }
    }
    .overlay {
        &-frame {
            height: 95%;
            width: 95%; 
        }
        &-title {
            h2 {
                font-size: 20px;
            }
        }
        &-icon {
            min-height: 15%;
        }
    }
}
@include breakpoint(mobile-sm) { 
    .tile {
        &-title {
            h2 {
                font-size: 20px;
            }
        }
        &-subtitle {
            div, p {
                line-height: 1.1rem;
                font-size: $font-size;
            }
        }
    }
    .overlay {

        &-title {
            h2 {
                font-size: 22px;
            }
        }

        .btn.btn-primary {
            min-width: $control-width-xs;
            font-size: $font-size-lg * 1.2;
        }
    }
}
@include breakpoint( mobile-md) { 
    .tile {
        &-title {
            h2 {
                font-size: 22px;
            }
        }
        &-subtitle {
            div, p {
                font-size: $font-size-sm;
            }
        }
    }
    .overlay {

        &-title {
            h2 {
                font-size: 24px;
            }
        }
        &-icon {
            min-height: 18%;
        }
        .btn.btn-primary {
            font-size: $font-size-lg * 1.3;
        }
    }

}
@include breakpoint(mobile-lg) { 
    .tile {
        &-title {
            h2 {
                font-size: 24px;
            }
        }
        &-subtitle {
            div, p {
                font-size: $font-size;
            }
        }
        &-icon {
            height: 100vh;
            max-height: 40%;
          }
    }
    .overlay {
        &-title {
            h2 {
                font-size: 24px;
            }
        }
        &-icon {
            min-height: 22%;
        }
    }

}
@include breakpoint(tablet) { 
    .tile {
        &-title {
            h2 {
                font-size: 26px;
            }
        }
        &-subtitle {
            div, p {
                line-height: 1.5rem;
                font-size: $font-size-lg;
            }
        }
    }
    .overlay {
        &-content {
            max-height: 100%;
        }
        &-title {
            h2 {
                font-size: 32px;
            }
        }
        .btn.btn-primary {
            min-width: $control-width-xs;
        }
    }

}
@include breakpoint(desktop) {
    .tile {
        &-title {
            h2 {
                font-size: 28px;
            }
        }
        &-subtitle {
            div, p {
                font-size: $font-size-lg * 1.2;
            }
        }
    }
    .overlay {
        &-title {
            h2 {
                font-size: 32px;
            }
        }
    }
}


@include breakpoint(wide) {
    .tile {
        &-title {
            h2 {
                font-size: 32px;
            }
        }
    }
}

@media screen and (orientation:landscape) {
    .overlay {
        %-frame{
            padding: 0;
            max-width: 95%;
        }
        &-content {
            max-height: 100%;
        }
    }
}