.column1 {
  grid-area: column1;
}

.column2 {
  grid-area: column2;
}

.column3 {
  grid-area: column3;
}

.page-grid-11 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "column1"
    "column2";
  gap: 1.5rem;
  align-items: center;
  justify-items: stretch;
  margin: 1.5rem 0;
}

@media (min-width: 1366px) {
  .page-grid-11 {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "column1 column2";
    gap: 3rem;
    margin: 3rem 0;
  }
}

.page-grid-11-reverse {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "column2"
    "column1";
  gap: 1.5rem;
  align-items: center;
  justify-items: stretch;
  margin: 1.5rem 0;
}

@media (min-width: 1366px) {
  .page-grid-11-reverse {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "column1 column2";
    gap: 3rem;
    margin: 3rem 0;
  }
}

.page-grid-11-start {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "column1"
    "column2";
  gap: 1.5rem;
  align-items: start;
  justify-items: stretch;
  margin: 1.5rem 0;
}

@media (min-width: 1366px) {
  .page-grid-11-start {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "column1 column2";
    gap: 3rem;
    margin: 3rem 0;
  }
}

.page-grid-11-start {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "column2"
    "column1";
  gap: 1.5rem;
  align-items: start;
  justify-items: stretch;
  margin: 1.5rem 0;
}

@media (min-width: 1366px) {
  .page-grid-11-start {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "column1 column2";
    gap: 3rem;
    margin: 3rem 0;
  }
}

.page-grid-111 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "column1"
    "column2"
    "column3";
  gap: 1.5rem;
  align-items: center;
  justify-items: stretch;
  margin: 1.5rem 0;
}

@media (min-width: 1366px) {
  .page-grid-111 {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: "column1 column2 column3";
    gap: 3rem;
    margin: 3rem 0;
  }
}

.page-grid-212 {
    display: grid;

    grid-template-columns: 1fr;
    grid-template-areas:
        "column1"
        "column2"
        "column3";

    gap: 1.5rem;

    align-items: center;
    justify-items: stretch;

    margin: 1.5rem auto;

    width: 100%;
}


/* =====================================================
   TABLET A DESKTOP – POMĚR 2 : 1 : 2
===================================================== */

@media (min-width: 1366px) {

    .page-grid-212 {
        grid-template-columns: 2fr 1.25fr 2fr;

        grid-template-areas:
            "column1 column2 column3";

        gap: 3rem;

        margin: 3rem auto;
    }

}

.page-grid-121 {
    display: grid;

    grid-template-columns: 1fr;
    grid-template-areas:
        "column1"
        "column2"
        "column3";

    gap: 1.5rem;

    align-items: center;
    justify-items: stretch;

    margin: 1.5rem auto;

    width: 100%;
}


/* =====================================================
   TABLET A DESKTOP – POMĚR 2 : 1 : 2
===================================================== */

@media (min-width: 1366px) {

    .page-grid-121 {
        grid-template-columns: 1.25fr 2fr 1.25fr;

        grid-template-areas:
            "column1 column2 column3";

        gap: 3rem;

        margin: 3rem auto;
    }

}