.openig-container{
    margin: 5rem var(--margin-medium) 5rem var(--margin-medium);
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(7, auto);
    gap: 1rem;
    grid-template-areas: 
    "left left banner banner banner banner banner banner right right"
    "left left banner banner banner banner banner banner right right"
    "left left banner banner banner banner banner banner right right"
    "left left banner banner banner banner banner banner right right"
    "left left description description description description description description right right"
    "left left description description description description description description right right"
    "left left description description description description description description right right"
}

.banner{
    grid-area: banner;
    text-align: center;
}

.banner h1{
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
    font-size: var(--font-size-h1);
    padding: 0 var(--padding-medium);
    color: var(--secoundary-forecolor-mode);
    margin-bottom: var(--margin-small);
}

.banner h1 em{
    font-style: italic;
    font-size: 2.5rem;
}

.banner h1 span{
    text-transform: uppercase;
    margin: var(--margin-small) 0;
}

.left-aside{
    grid-area: left;
    text-align: center;
}

.right-aside{
    grid-area: right;
    text-align: center;
}

.left-aside, .right-aside{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.left-aside p, .right-aside p{
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--secoundary-forecolor-mode);
    border: var(--border);
    padding: var(--padding-medium) 0;
    border-radius: var(--border-radius); 
    box-shadow: var(--border-shadow-fallback);
    box-shadow: var(--border-shadow);
}

.description{
    grid-area: description;
    text-align: center;
    align-content: center;
}

.description p {
    font-size: 2rem;
    color: var(--secoundary-forecolor-mode);
}

.main-video{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.main-video video{
    width: 70vw;
    height: auto;
    border-radius: var(--border-radius);
    border: var(--border);
    box-shadow: var(--border-shadow-fallback);
    box-shadow: var(--border-shadow);
}

.preview-heading{
    color: var(--secoundary-forecolor-mode);
    font-size: 2rem;
    margin-left: var(--margin-medium);
    margin-bottom: var(--margin-small);
}

.preview-content{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-left: var(--border-preview-container);
    border-bottom: var(--border-preview-container);
    border-radius: var(--border-radius);
    padding-top: var(--padding-medium);
}

.content-previews-container{
    margin: 0 var(--margin-medium);
}

a.preview-link-more{
    color: var(--secoundary-forecolor-mode);
    text-decoration: none;
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 6.5rem;
    gap: 0.5rem;
    font-size: var(--font-size-button);
    align-items: center;
    border-radius: var(--border-radius);
    border: var(--border);
    padding: var(--padding-medium) 0;
    background-color: var(--secoundary-backgroundcolor-mode);
    font-weight: bold;
    box-shadow: var(--border-shadow-fallback);
    box-shadow: var(--border-shadow);
}

.preview-link-container{
    display: flex;
    justify-content: flex-end;
    margin: var(--margin-medium) 0;
}

.about-grid{
    display: grid;
    column-gap: 1.5rem;
    row-gap: 2rem;
    grid-template-columns: [dots] auto [descriptions] 1fr;
    grid-template-rows: repeat(3, auto);
    margin-left: var(--margin-large);
}

.about-grid p{
    grid-column: descriptions;
    font-size: 1.5rem;
    color: var(--secoundary-forecolor-mode);
    line-height: 1.5;
}

img.about-info-dot{
    width: 4rem;
    height: auto;
    grid-column: dots;
}

.description-flex{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.maxwidth-previews-container > .content-previews-container{
    margin: 0;
}

.maxwidth-previews-container .content-previews-container{
    padding: 0 1rem;
}

.maxwidth-previews-container{
    max-width: 1500px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.video-content-container p{
    font-size: 1.5rem;
    color: var(--secoundary-forecolor-mode);
    text-align: center;
    padding: 0 5rem;
    line-height: 1.5;
}

.video-content-container{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex-basis: 200px;
    justify-content: space-around;
    gap: 1.5rem;
    margin: 0 var(--margin-medium);
}

.video-content-container video{
    margin-bottom: 1rem;
    max-width: 450px;
    min-width: 300px;
    width: 25vw;
    height: auto;
    border-radius: var(--border-radius);
    border: var(--border);
    box-shadow: var(--border-shadow-fallback);
    box-shadow: var(--border-shadow);
}

.video-description-container{
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Hover Events */

.video-content-container video:hover{
    box-shadow: var(--border-shadow-fore);
    transition: var(--transition-border-shadow);
}

.main-video video:hover{
    box-shadow: var(--border-shadow-fore);
    transition: var(--transition-border-shadow);
}

/* Screen Media Queries  */

@media screen and (min-width: 1535px){
    .openig-container{
        margin: 5rem 0;
    }
}

@media screen and (max-width: 1200px){
    .banner h1 {
        font-size: 2.5rem;
    }

    .banner h1 em{
        font-size: 2rem;
    }

    .left-aside p, .right-aside p {
        font-size: 1rem;
    }

    .description p {
        font-size: 1.5rem;
    }
}

@media screen and (max-width: 767px){
    .openig-container{
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: auto;
        grid-template-areas:
        "banner banner banner banner"
        "banner banner banner banner"
        "banner banner banner banner"
        "banner banner banner banner"
        "description description description description"
        "description description description description"
        "left left right right"
        "left left right right"
        "left left right right"
        "left left right right"
        "left left right right"
        "left left right right";   
    }

    .left-aside, .right-aside{
        row-gap: 1.5rem;
    }

    .banner h1 {
        font-size: 2rem;
        gap: 1rem;
    }

    .banner h1 em{
        font-size: 1.5rem;
    }

    .description{
        margin: var(--margin-medium) 0;
    }

    img.about-info-dot{
        width: 2.5rem;
    }
    
    .description-flex p{
        font-size: 1rem;
    }

    .about-grid{
        row-gap: 1rem;
        margin-left: var(--margin-medium);
    }
}