/* Adding variables */
@import url("../../css/variables.css");

/* Main Hero Block */
.hero-main__main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--l-spacing);
    width: 100%;
    background: var(--dark-gradient);
    padding: calc(var(--xxl-spacing) * 2) 0 calc(var(--l-spacing) * 2);
}

.hero-main__main-container.adding-content {
    padding-bottom: 0;
}

.hero-main__container-inner {
    display: flex;
    flex-direction: column;
    gap: var(--m-spacing);
    width: var(--width);
    margin: 0 auto;
}

.hero-main__container-inner h1 {
    color: white;
    font-size: var(--h1);
    font-weight: var(--extralight);
    text-align: center;
}

.hero-main__container-inner h1 strong {
    font-weight: var(--regular);
    color: var(--neopaleblue);
}

.hero-main__content-container-inner-video {
    display: flex;
    justify-content: center;
    width: var(--width);
    padding: 0;
    margin: 0 auto;
}

.hero-main__content-container-inner-image {
    display: flex;
    justify-content: center;
    width: var(--width);
    padding: 0;
    text-align: center;
}

.hero-main__content-container-inner-image img {
    max-width: 100%;
}

/**********************************************/
/******************* Laptop *******************/
/**********************************************/
@media (max-width: 1366px) {
    
}

/**********************************************/
/******************* Tablet *******************/
/**********************************************/
@media (max-width: 1024px) {
    /* Main Hero Block */
    .hero-main__main-container {
        padding: calc(var(--xxl-spacing) * 1.5) var(--m-spacing) calc(var(--l-spacing) * 1.5);
    }

    .hero-main__main-container.adding-content {
        padding: calc(var(--xxl-spacing) * 1.5) var(--m-spacing) 0;
    }

    .hero-main__content-container-inner-image {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: var(--width);
        padding: 0 var();
        text-align: center;
    }
}

/**********************************************/
/******************* Mobile *******************/
/**********************************************/
@media (max-width: 767px) {
    /* Main Hero Block */
    .hero-main__main-container {
        padding-left: var(--s-spacing);
        padding-right: var(--s-spacing);
    }

    .hero-main__main-container.adding-content {
        padding-left: var(--s-spacing);
        padding-right: var(--s-spacing);
    }
}