$breakpoint: 360px;
$radius: 0px;
$tablet: 480px;
$body-font-size: 1rem;

$navbar-breakpoint: $breakpoint;

$panel-item-border: 1px solid hsl(0, 0%, 93%);
$panel-shadow: 0;

$card-shadow: 0;
$card-radius: 0;
$card-content-padding: 0;

$table-cell-padding: 0.5em;
$table-cell-border-width: 0;

$section-padding: 0 1.5rem;

$tag-delete-margin: 15px;

$title-weight: normal;

@import "bulma/sass/base/_all.sass";
@import "bulma/sass/utilities/_all.sass";
@import "bulma/sass/grid/_all.sass";
@import "bulma/sass/components/_all.sass";
@import "bulma/sass/form/_all.sass";
@import "bulma/sass/helpers/_all.sass";
@import "bulma/sass/layout/_all.sass";
@import "bulma/sass/elements/_all.sass";

body {
    font-family: $family-primary;
}

.input, .button{
    border-radius: 0;
}

.wide-column {
    width: 100%;
}

.is-mono {
    font-family: monospace;
}

nav {
    border-bottom: 1px solid;
    margin: auto;
}

a.is-danger {
    color: $danger
}

.container {
    margin-top: 30px;
}

th {
    font-weight: normal;
}

form {
    padding-left: 15px;
    padding-right: 15px;
}

.text-size-1{
    @extend .is-size-4 !optional;
}

.text-size-2{
    @extend .is-size-5 !optional;
}

.gallary_container{
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
  grid-auto-rows: 15.5em;  
  padding: 10px;
}

.image_container img{
  width: 100%;
  height: 100%; 
    box-shadow: rgba(3, 8, 20, 0.1) 0px 0.15rem 0.5rem, rgba(2, 8, 20, 0.1) 0px 0.075rem 0.175rem;
  object-fit: cover;
}

@media screen and (min-width: $breakpoint) {
  .image-tall {
    grid-row: span 2 / auto;
  }

  .image-wide {
    grid-column: span 2 / auto;
  }
}

// Fix horizontal scroll on iOS
.scrolling-element {
    overflow-x: scroll; /* Must be 'scroll' not 'auto' */
    -webkit-overflow-scrolling: touch;
}