/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

@media all and (min-width: 480px) {
  .gal_wrapper{
    display: grid;
    grid-gap: 30px;
    width: 100%;
    max-width: 1158px;
    aspect-ratio: 1158/564;
    margin: 30px 0px;
  }
  .gal_grid_1{
    grid-template-areas:
      '. . f f'
      'h h f f'
    ;
  }
  .gal_grid_2{
    grid-template-areas:
      '. h f f'
      '. h f f'
    ;
  }
  .gal_grid_3{
    grid-template-areas:
      'h h . .'
      'f f . .'
    ;
  }
  .gal_grid_4{
    grid-template-areas:
      'h h a .'
      'f f a .'
    ;
  }
  .gal_grid_5{
    grid-template-areas:
      'h f a a'
      'h f . .'
    ;
  }

}
  .gal_img{
    max-width: 100%;
    width: auto;
    height: 100%;
    overflow: hidden;
    position: relative;
  }
  .gal_img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    position: absolute;
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0;
 }

@media all and (max-width: 479px) {
  .gal_wrapper{
    display: grid;
    grid-gap: 10px;
    max-width: 564px;
    width: 100%;
    aspect-ratio: 564/1158;
    margin: 10px 0px;
  }
  .gal_grid_1{
    grid-template-areas:
      '. .'
      'h h'
      'f f'
      'f f'
    ;
  }
  .gal_grid_2{
    grid-template-areas:
      '. h'
      '. h'
      'f f'
      'f f'
    ;
  }
  .gal_grid_3{
    grid-template-areas:
      'h h'
      'f f'
      '. .'
      '. .'
    ;
  }
  .gal_grid_4{
    grid-template-areas:
      'h h'
      'f f'
      'a .'
      'a .'
    ;
  }
  .gal_grid_5{
    grid-template-areas:
      'h f'
      'h f'
      'a a'
      '. .'
    ;
  }
}
.ar_11{aspect-ratio: auto 1/1;}
.ar_21{aspect-ratio: auto 564/267;}
.ar_12{aspect-ratio: auto 267/564;}
.gal_grid_a{grid-area: a;}
.gal_grid_b{grid-area: b;}
.gal_grid_h{grid-area: h;}
.gal_grid_f{grid-area: f;}
.gradient_1{background: linear-gradient(0deg, rgba(166,9,61,1) 0%, rgba(27,54,93,1) 100%);}
.gradient_2{background: linear-gradient(90deg, rgba(166,9,61,1) 0%, rgba(27,54,93,1) 100%);}
.gradient_3{background: linear-gradient(180deg, rgba(166,9,61,1) 0%, rgba(27,54,93,1) 100%);}
.gradient_4{background: linear-gradient(270deg, rgba(166,9,61,1) 0%, rgba(27,54,93,1) 100%);}