.frames {display:flex;width:100vw;height:100vh;}
.yekdas {width:160px;height:100vh;}
.yekda {height:50vh;}
.yekda:last-of-type {}
.stop-scroll {overflow:hidden;}
.frames-list {position:relative;flex:1;height:100vh;display:grid;padding:1px;}
.frames-masks {position:absolute;z-index:100;top:0;left:0;right:0;bottom:0;display:grid;pointer-events:none;}
.frames-masks span {font-weight:bold;font-size:2rem;opacity:.25;padding:0 .5rem;}
.frames-with-2 .frames-list {grid-template-columns:repeat(2,1fr);}
.frames-with-2 .frames-masks {grid-template-columns:repeat(2,1fr);}
.frames-with-2 .frame:nth-child(-n+5) {display:flex;}

.frames-with-2v6 .frames-list {}
.frames-with-2v6 .frames-masks {}
.frames-with-2v6 .frame:nth-child(-n+7) {display:flex;}
.frames-with-2v6 .frame:nth-child(2), .frames-with-2v6 .frames-masks span:nth-child(1) {grid-column:1/3;grid-row:1/3;}
.frames-with-2v6 .frame:nth-child(3), .frames-with-2v6 .frames-masks span:nth-child(2) {grid-column:3/4;grid-row:1/2;}
.frames-with-2v6 .frame:nth-child(4), .frames-with-2v6 .frames-masks span:nth-child(3) {grid-column:3/4;grid-row:2/3;}
.frames-with-2v6 .frame:nth-child(5), .frames-with-2v6 .frames-masks span:nth-child(4) {grid-column:1/2;grid-row:3/4;}
.frames-with-2v6 .frame:nth-child(6), .frames-with-2v6 .frames-masks span:nth-child(5) {grid-column:2/3;grid-row:3/4;}
.frames-with-2v6 .frame:nth-child(7), .frames-with-2v6 .frames-masks span:nth-child(6) {grid-column:3/4;grid-row:3/4;}

.frames-with-3 .frames-list {grid-template-columns:repeat(3,1fr);}
.frames-with-3 .frames-masks {grid-template-columns:repeat(3,1fr);}
.frames-with-3 .left-yekda {display:none;}
.frames-with-3 .frame:nth-child(-n+10) {display:flex;}
.frames-with-4 .frames-list {grid-template-columns:repeat(4,1fr);}
.frames-with-4 .frames-masks {grid-template-columns:repeat(4,1fr);}
.frames-with-4 .yekdas {display:none;}
.frames-with-4 .frame {display:flex;}
.frames-with-5 .frames-list {grid-template-columns:repeat(5,1fr);}
.frames-with-5 .frames-masks {grid-template-columns:repeat(5,1fr);}
.frames-with-5 .yekdas {display:none;}
.frames-with-5 .frame {display:flex;}
.frames-with-2.enhanced {}
.frames-with-2.enhanced .frames-list {grid-template-columns:repeat(3,1fr);}
.frames-with-2.enhanced .frames-masks {display:none;}
.frames-with-2.enhanced .frames-list .frame:nth-child(2) {grid-column:span 3;grid-row:span 12;}
.frames-with-3.enhanced {}
.frames-with-3.enhanced .frames-list {grid-template-columns:repeat(4,1fr);}
.frames-with-3.enhanced .frames-masks {display:none;}
.frames-with-3.enhanced .frame:nth-child(6) {grid-column:span 4;grid-row:span 50;}
.frame:nth-child(odd) {background:#eaeaea;}
.frame:nth-child(odd) {background:#161616;}
.frame {position:relative;display:none;padding:1px;justify-content:center;align-items:center;background:#000;border:1px solid #000;cursor:grab;}
.frame iframe {border:none;width:100%;height:100%;pointer-events:none;}
.frame .hover {position:absolute;z-index:5;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);display:flex;justify-content:space-evenly;align-items:center;opacity:0;transition:.4s;}
.frame .hover img {filter:invert(1) opacity(.75);transition:.4s;}
.frame .hover > div {position:absolute;cursor:pointer;}
.frame .toggle {left:1rem;bottom:1rem;}
.frame .mute {right:1rem;bottom:1rem;}
.frame .youtube {top:1rem;right:1rem;}
.frame *:hover img {filter:invert(1) opacity(1);}
.frame:hover .hover {opacity:1;}
.frame-active {border:1px solid var(--green);}
.text-cont {position:relative;width:100vw;height:100vh;display:flex;justify-content:space-between;align-items:center;background:var(--dark);}
article {flex:1;padding:2rem;max-width:60vw;}
article strong {position:relative;display:inline-block;margin-left:23px;}
article strong:not(:first-of-type) {margin-top:2rem;margin-bottom:1rem;}
article strong:before {content:'';position:absolute;left:-23px;top:8px;height:1px;width:20px;background:#fff;}
article strong:after {content:'';position:absolute;right:-23px;top:8px;height:1px;width:20px;background:#fff;}
article p {margin:.5rem 0;}
@media only screen and (max-width:768px){
    body {grid-template-columns:1fr;}
    iframe {min-height:210px;}
}