/* banner.css */

/* - */

#banner
{
    display: grid;
    width: 100%;
}

#banner .workspace
{
    grid-column: 1/span 3;
    grid-row: 1;
    z-index: 2;
}

@media( min-width: 768px )
{
    #banner .workspace
    {
        grid-column: 2;
        grid-row: 1;
        z-index: 3;
    }
}


/* - */

#banner-img-container
{
	height: 256px;
	width: 100%;
	grid-row: 1;
	grid-column: 1/span 3;
	overflow: hidden;
	display: grid;
	align-content: center;
	justify-content: center;
}

#banner-img-container div
{
	width: 100%;
	overflow: hidden;
	display: grid;
	align-content: center;
	justify-content: center;
}

/* - */


.banner-img
{
    display: none;
    
    max-width: 100%;
    
    grid-row: 1;
    grid-column: 1 /span 3;
    
    z-index: 1;
}

@media(min-width: 768px )
{
    .banner-img
    {
        display: grid;
    }
}

.mobile-banner-img
{
    max-width: 100%;
    
    grid-row: 1;
    grid-column: 1;
    
    z-index: 1;
}

@media( min-width: 768px )
{
    .mobile-banner-img
    {
        display: none;
    }
}

/* - */

.banner-cover
{
    grid-row: 1;
    grid-column: 1/span 3;
    
    z-index: 2;
    
    width: 100%;
    height: 100%;
    
    background-color: rgba(0, 0, 0, 0.5);
}

/* - */

.banner-txt
{
    display: grid;
    
    grid-gap: 8px;
   
    width: 80%;
    
    align-content: center;
    justify-self: center;
}

@media(min-width: 768px)
{
    .banner-txt
    {
        justify-self: start;
    }
}

/* - */

.banner-txt h1
{
    color: #6dbabe;
}

.banner-txt h3 {
  color: #fff;
}

.banner-txt a {
  color: #aaa;
  text-decoration: none;
}

.banner-txt p {
  color: #aaa;
}