@charset "utf-8";

/* =============================================
   Column Page Layout — newscolumn-layout.css
   Mobile-first / 5col x 5row grid
   ============================================= */

.Col-Wrapper {
    display: grid;
    grid-template:
        "r1c1    ......  ......  ......  r1c5  "  40px
        "r2c1    label   lbar    writer  r2c5  "  40px
        "r3c1    main    main    main    r3c5  "  1fr
        "r4c1    back    bbar    bbar    r4c5  "  40px
        "r5c1    ......  ......  ......  r5c5  "  40px
        / 10px   80px    1fr     100px    10px;
}

.col-label    { grid-area: label;  display: flex; align-items: center; justify-content: center; margin: 0; background-color: #eee; color: #111; font-size: .8rem; }
.col-label a { text-decoration: none; color: #111; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.col-label a:hover { opacity: .8; }
.col-labelbar { grid-area: lbar; background-color: #ddd; }
.col-writer   { grid-area: writer; display: flex; align-items: center; justify-content: flex-end; margin: 0; padding-right: 1rem; background-color: #ddd; font-size: .9rem; font-family: "Oswald", sans-serif;  }
.col-main     { grid-area: main; padding: 80px 20px 80px; }
.col-title    { margin-bottom: 60px;  text-align: center; font-size: 1.2rem; letter-spacing: .01rem;}
.col-back     { grid-area: back;  display: flex; align-items: center; justify-content: center; text-decoration: none; background-color: #222; color: #fff; font-size: .8rem; }
.col-back:hover { opacity: .8; }
/*.col-back     { grid-area: back; background-color: #ddd; }*/
.col-backbar  { grid-area: bbar; background-color: #ddd; }
.col-r1c1     { grid-area: r1c1; background-color: #f9f9f9; border-right: 1px solid #f0f0f0; }
.col-r1c5     { grid-area: r1c5; background-color: #f9f9f9; border-left: 1px solid #f0f0f0; }
.col-r2c1     { grid-area: r2c1; background-color: #cacaca; border-right: 1px solid #cacaca; }
.col-r2c5     { grid-area: r2c5; background-color: #cacaca; border-left: 1px solid #cacaca; }
.col-r3c1     { grid-area: r3c1; background-color: #f9f9f9; border-right: 1px solid #f0f0f0; }
.col-r3c5     { grid-area: r3c5; background-color: #f9f9f9; border-left: 1px solid #f0f0f0; }
.col-r4c1     { grid-area: r4c1; background-color: #cacaca; border-right: 1px solid #cacaca; }
.col-r4c5     { grid-area: r4c5; background-color: #cacaca; border-left: 1px solid #cacaca; }
.col-r5c1     { grid-area: r5c1; background-color: #f9f9f9; border-right: 1px solid #f0f0f0; }
.col-r5c5     { grid-area: r5c5; background-color: #f9f9f9; border-left: 1px solid #f0f0f0; }


.subtitle {
    margin-bottom: 1.5rem;
    padding: 0;
    font-family: "Square Peg", cursive;
    font-weight: 400;
    font-size: 2.4rem;
    display: inline-block;
    clip-path: inset(0 100% 0 0);
    animation: clipReveal 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    color: #999;
}
h3.M-title {
font-size: 1.1rem;
}

@keyframes clipReveal {
    to { clip-path: inset(0 0% 0 0); }
}
/* =============================================
   Responsive
   ============================================= */
@media screen and (min-width: 480px) {
.Col-Wrapper {
    display: grid;
    grid-template:
        "r1c1    ......  ......  ......  r1c5  "  40px
        "r2c1    label   lbar    writer  r2c5  "  40px
        "r3c1    main    main    main    r3c5  "  1fr
        "r4c1    back    bbar    bbar    r4c5  "  40px
        "r5c1    ......  ......  ......  r5c5  "  40px
        / 20px   120px    1fr     120px    20px;
}
}
@media screen and (min-width: 768px) {
.Col-Wrapper {
    display: grid;
    margin-bottom: 80px;
    grid-template:
        "r1c1    ......  ......  ......  r1c5  "  80px
        "r2c1    label   lbar    writer  r2c5  "  40px
        "r3c1    main    main    main    r3c5  "  1fr
        "r4c1    back    bbar    bbar    r4c5  "  40px
        "r5c1    ......  ......  ......  r5c5  "  80px
        / 40px   120px    1fr     120px    40px;
}

.col-label    { font-size: 1rem; letter-spacing: .1rem; }
.col-writer   { font-size: 1rem; }
.col-title    { margin-bottom: 80px; }
.col-main     { padding: 80px 40px 80px; }

h1.col-title {
letter-spacing: .15rem;
}

}
@media screen and (min-width: 960px) {

}