lapikud.github.io/_sass/helpdesk.scss

#helpdesk-page {

  #helpdesk-banner {
    background      : black;
    display         : flex;
    flex-direction  : row;
    flex            : 1;
    justify-content : center;
    align-items     : center;
    text-align      : center;
    margin          : 3rem auto;
    padding         : 2rem;

    h1, h3 {
      color       : white;
      font-weight : 400;
    }

    .emphasis-text-bold {
      font-weight : bold;
    }

    .emphasis-text-color {
      color : $color-primary;
    }

    #helpdesk-logo {
      display : block;
      width   : 100%;
      height  : auto;
    }

    #helpdesk-logo-container {
      flex    : 1;
      padding : 25px;

    }

    #banner-text {
      flex : 2;
    }

  }

  #maparea {
    display         : flex;
    align-items     : center;
    justify-content : center;

    .siema, #map {
      width      : 50%;
      max-height : 300px;
      margin     : 20px;
    }
    #map {
      height     : 60vh;
      max-height : 300px;
    }

    .siema {
      .carousel-image-container {
        display         : flex;
        justify-content : center;
        align-items     : center;
        img {
          max-height : 300px;
          width      : 100%;
          height     : auto;
          object-fit : scale-down;
        }
      }
    }
  }

  #pricing {
    margin-bottom : 2rem;
    p {
      margin      : 1rem auto;
      font-weight : bold;
    }
    table {
      width : auto;

      th td {
        font-weight : bold;
      }
      tr:first-child {
        max-width : 40%;
      }
    }
  }

  #location {
    h4 {
      margin : 0.1rem auto;
    }
  }

  #contact {
    display        : flex;
    flex-direction : row;

    .subtext {
      opacity : 0.7;
    }

    #opening-times, #contact-methods {
      flex    : 1;
      padding : 15px;
    }

    #contact-methods {
      h4 {
        margin : 0.1rem auto;
      }
    }
  }
}

@media (max-width : 900px) {
  #helpdesk-page {
    #helpdesk-banner {
      flex-direction : column;
    }

    table {
      tr:first-child {
        max-width : 30%;

      }
      td, th {
        padding : 0.5rem 0.5rem;
      }
    }

    #maparea {
      flex-direction : column;
      .siema, #map {
        width : 100%;
      }
    }

    #contact {
      flex-direction : column;
    }
  }

}