@media (max-width : 1400px) {}

@media (max-width : 1200px) {}

@media (max-width : 992px) {
  :root {
    --post-column: 4;
  }
}

@media (max-width : 768px) {
  .header {
    flex-direction: column;
    align-items: center;
  }

  .header .header-logo {
    margin-right: unset;
  }

  .header .header-contact {
    position: absolute;
    top: 20px;
    right: 20px;
  }

  .posts .post-layout-2-1 {
    grid-column-start: span 4;
    grid-row-start: span 2;
  }

  .posts .post-layout-2-2 {
    grid-column-start: span 4;
    grid-row-start: span 4;
  }

  .posts .post-layout-2-3 {
    grid-column-start: span 4;
    grid-row-start: span 6;
  }

  .footer {
    display: block;
  }

  #modal > .modal-content {
    width: 95%;
  }
}

@media (max-width : 576px) {}


@media (min-width : 0) {}

@media (min-width : 576px) {}

@media (min-width : 768px) {
  .header .header-detail {
    max-width: 800px;
    margin-right: auto;
  }
}

@media (min-width : 992px) {}

@media (min-width : 1200px) {}