/* home page */
.black-container {
 --gap:16px;
 --radius:50px;
 background:#000; 
 padding-top:var(--gap);
}

.blue-line {
 border-radius:calc(var(--radius) - var(--gap)) 0 0 calc(var(--radius) - var(--gap));
 border:5px solid #006666;
 border-right:0; 
}
.blue-line img {
 width:100%;
 border-radius:calc(var(--radius) - var(--gap) - var(--gap));
 max-inline-size: 100%;
 block-size: auto;
 aspect-ratio: 4/3;
 object-fit: cover;
 object-position: top center;
 filter:grayscale(75%);
}
.blue-line img:hover {filter:grayscale(0);}

.blue-line-left {
 background:#000 url('/images/homepage-empire.png') right top no-repeat;
 background-size: auto 125%;
}
.blue-line-right {
 background:#000 url('/images/homepage-rebel3.png') right top no-repeat;
 background-size: auto 125%;
}

/* border-radius: (top-left, top-right, bottom-right, bottom-left) */
.yellow-line-one {
 border:5px solid #f2c665;
 border-radius:var(--radius) 0 0 var(--radius);
 border-right:0;
 padding:var(--gap) 0 var(--gap) var(--gap);
}

.yellow-line-two {
 background:#000;
 margin-left:40px;
 position:relative;
 bottom:5px;
 left:0;
}
.yellow-line-two .inner {
 border:5px solid #f2c665;
 border-radius:0 var(--radius) var(--radius) 0;
 border-left:0;
 padding:0 40px 0 0;
 position:relative;
}

.yellow-line-three {
 background:#000;
 margin-right:40px;
 position:relative;
 top:-10px;
 left:0;
}
.yellow-line-three .inner {
 border:5px solid #f2c665;
 border-radius:var(--radius) 0 0 var(--radius);
 border-right:0;
 padding:var(--gap) 0 var(--gap) var(--gap);
}

.yellow-line-four {
 background:#000;
 margin:0 0 -15px 40px;
 position:relative;
 top:-15px;
 left:0;
}
.yellow-line-four .inner {
 border:5px solid #f2c665;
 border-radius:0 var(--radius) 0 0;
 border-left:0; 
 border-bottom:0;
 padding:var(--gap) 0 var(--gap) var(--gap);
}