/* Extra small devices + default behavior */
/* PUT ALL CSS FOR SMALL DEVICES HERE!!!! */

/* CTA styling (mostly defined in main.css) */
.cta-tri-case-study {
    margin: 15pt 0 0 0;
    width: 130pt;
}

/* Defines the grid layout for Triangle's summary */
.layout-sec-summary-trianglev1 {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4,auto);
    grid-template-areas:
    "summary"
    "overview"
    "hero"
    "details";
  }

/* Defines the grid layout for Triangle's article 1 */
.layout-sec-1-trianglev1 {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4,auto);
    grid-template-areas:
    "description"
    "challenges"
    "media1"
    "media2";
}

/* Defines the grid layout for Triangle's article 2 */
.layout-sec-2-trianglev1 {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3,auto);
    grid-template-areas:
    "description"
    "challenges"
    "media1";
}

.project-sec-footer-trianglev1 {
    grid-template-columns: 1fr;
    grid-template-areas:
    "next";
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

    /* Defines the grid layout for Triangle's summary */
.layout-sec-summary-trianglev1 {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3,auto);
    grid-template-areas:
    "summary summary summary summary"
    "overview overview . ."
    "hero hero hero details";
  }

/* Defines the grid layout for Triangle's article 1 */
.layout-sec-1-trianglev1 {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3,auto);
    grid-template-areas:
    "description description . ."
    "media1 media1 challenges challenges"
    "media2 media2 . .";
}

/* Defines the grid layout for Triangle's article 2 */
.layout-sec-2-trianglev1 {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2,auto);
    grid-template-areas:
    "description description . ."
    "media1 media1 challenges challenges";
}

/* Defines the footer layout for Triangle */
.project-sec-footer-trianglev1 {
    grid-template-columns: 1fr;
    grid-template-areas:
    "next next next next";
}

}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

}