﻿/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

#main section.interamerican {
    padding: 2rem;
}

/* 
/* PARALLAX COVER 
*/

#main section.interamerican .parallax-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: clip;
    -webkit-clip-path: inset(0 -100vw);
            clip-path: inset(0 -100vw);
    background-color: black;
}

#main section.interamerican .parallax-cover .inner {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
}

/*@supports (animation-timeline: view()) {
    #main section.interamerican .parallax-cover .inner {
        height: 130%;
        -webkit-animation: float-image linear forwards;
                animation: float-image linear forwards;
        animation-timeline: view();*/
        /* px - % - cover - contain - entry - exit */
        /*animation-range: cover;
    }
}*/


#main section.interamerican .parallax-cover img {
    position: absolute;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

/*@-webkit-keyframes float-image {
    0%      { -webkit-transform: translateY(-15%); transform: translateY(-15%) }
    100%    { -webkit-transform: translateY(15%); transform: translateY(15%)  }
}

@keyframes float-image {
    0%      { -webkit-transform: translateY(-15%); transform: translateY(-15%) }
    100%    { -webkit-transform: translateY(15%); transform: translateY(15%)  }
}*/

.interamerican-content {
    position: relative;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding: 2.5rem;
    background-color: rgba(0, 0, 0, 0.4);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    border-radius: 2rem;
    isolation: isolate;
}

.interamerican-content > * {
    z-index: 1;
}

.interamerican-content::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    border-radius: inherit;
    border: 2px solid rgba(255, 255, 255, 0.5);
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(black), to(rgba(0,0,0,0.5)));
    -webkit-mask-image: linear-gradient(to bottom, black 0%, rgba(0,0,0,0.5) 100%);
            mask-image: -webkit-gradient(linear, left top, left bottom, from(black), to(rgba(0,0,0,0.5)));
            mask-image: linear-gradient(to bottom, black 0%, rgba(0,0,0,0.5) 100%);
}

.interamerican-content h2 {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.2;
    color: white;
    margin-bottom: 0.75rem;
}

.interamerican-content h2 span {
    display: block;
}

.interamerican-content p {
    font-size: 1.15rem;
    font-weight: 400;
    line-height: 1.3;
    color: white;
    max-width: 45ch;
}

    .interamerican-content > a {
        position: relative;
        display: block;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        font-size: 1rem;
        background-color: #d6001c;
        color: white;
        padding: 0.75rem 2rem;
        margin-top: 3rem;
    }