/* === N ELEMENTS === */
.n-logo-svg {
    display: flex;
    width: var(--logo-width);
    height: auto;
    align-items: center;
    justify-content: center;
}

.n-logo-svg > svg {
    display: flex;
    width: inherit;
    height: auto;
    fill: var(--logo-fill);
}

/* --- BUTTONS SVG --- */
.n-btn-svg {
    display: flex;
    width: fit-content;
    height: auto;
    padding: 0.4rem 0.4rem;
    touch-action: manipulation;
    cursor: pointer;
    border-radius: var(--btn-svg-radius);
    background-color: var(--btn-svg-bkg);
}

.n-btn-svg > svg {
    display: flex;
    align-self: center;
    justify-self: center;
    width: var(--btn-svg-width);
    height: auto;
    fill: var(--btn-svg-fill);
}

/*.n-svg-btn-light:hover, .n-svg-btn-light:focus, .n-svg-btn-light:active {
    background-color: var(--btn-svg-bkg-hover);
}

.n-svg-btn-light:hover > svg, .n-svg-btn-light:focus > svg, .n-svg-btn-light:active > svg {
    fill: var(--btn-svg-fill-hover);
}*/

.n-btn-txt-svg {
    display: flex;
    width: fit-content;
    height: fit-content;
    justify-content: space-between;
    padding: 0.2rem 0.2rem;
    touch-action: manipulation;
    cursor: pointer;
    background-color: var(--btn-txt-bkg);
    border-radius: 1.2rem;
}

.n-btn-txt-svg > svg {
    display: flex;
    align-self: center;
    justify-self: center;
    width: 3rem;
    height: auto;
    padding: 0.2rem;
    background-color: var(--btn-txt-svg-bkg);
    fill: var(--btn-txt-svg-fill);
    border-radius: var(--btn-txt-svg-radius);
}

.n-btn-txt-svg > p {
    display: flex;
    align-self: center;
    font-family: "Source", serif;
    font-size: 1.2rem;
    font-weight: 500;
    font-style: italic;
    color: var(--txt-white);
    text-align: center;
    margin-left: 0.5rem;
    margin-bottom: 0.2rem;
}

/* ------------------------------------------------------------------- */
/* === IMAGES === */
.n-img-hero {
    display: flex;
    background-image: var(--img-hero-01);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    aspect-ratio: 1024 / 557;
}

/* ------------------------------------------------------------------- */
/* === VIDEOS === */
.n-video-player {
    display: flex;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    background-color: var(--video-hero-bkg);
    border-radius: var(--video-hero-radius);
    overflow: hidden;
}

.n-video-player video {
    display: flex;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}