/* =========================================
HOUSE OF STAPLETON
LAYOUTS.CSS
========================================= */

/* =========================================
MAIN WRAPPER
========================================= */

.wrapper {

max-width: 1200px;
width: 100%;

margin: 20px auto;

display: flex;
flex-direction: column;

padding: 20px;

background: rgba(255,255,255,.95);

border-radius: 12px;

box-shadow:
    0 6px 18px rgba(0,0,0,.20);

backdrop-filter: blur(2px);

}

.site-main {

padding: 20px 0;

min-height: 60vh;

}

/* =========================================
   FULL WIDTH LAYOUT
========================================= */

.site-main-full {

    width: 100%;

    padding: 20px 30px;

    box-sizing: border-box;
}

/* =========================================
GENERIC LAYOUT SYSTEM
========================================= */

.layout {
display: flex;
gap: 20px;
}

.col {
display: flex;
flex-direction: column;
gap: 15px;
}

.games-layout .col {
    gap: 30px;
}

/* =========================================
2 COLUMN
75 / 25
========================================= */

.layout-2col-75-25 .col.left {
flex: 1;
min-width: 0;
}

.layout-2col-75-25 .col.right {
flex: 0 0 260px;
}

/* =========================================
3 COLUMN
40 / 40 / 20
========================================= */

.layout-3col-25 .col.left {
flex: 1;
}

.layout-3col-25 .col.middle {
flex: 1;
}

.layout-3col-25 .col.right {

flex: .5;

position: sticky;
top: 20px;

}

/* =========================================
3 COLUMN
25 / 50 / 25
========================================= */

.layout-3col-25-50-25 .col.left {
flex: .5;
}

.layout-3col-25-50-25 .col.middle {
flex: 1;
}

.layout-3col-25-50-25 .col.right {

flex: .5;

position: sticky;
top: 20px;

}