@use './typography.scss' as *;
$sm: 320px;
$md: 360px;

ion-card {
  background: var(--button-background);
  box-shadow: var(--box-shadow);
  border-radius: 8px;
  padding: 30px 30px 25px 30px;
  display: grid;
  margin-inline: 0px;

  .card-header {
    margin-bottom: 7px;
    @extend .f-calistoga;
    @extend .f-w-600;
    @extend .h-160;
    @extend .f-md;
    @extend .f-white;
  }

  .information {
    @extend .f-calistoga;
    @extend .f-sm;
    @extend .f-w-400;
    @extend .h-180;
    @extend .f-gray;
  }
  .gallery-container {
    margin: -5.5px;
  }

  div.gallery {
    margin: 5.5px;
    float: left;
    width: 86px;
    height: 86px;
  }

  div.gallery img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
  }
}

@media screen and (max-width: $md) {
  ion-card {
    padding: 20px 20px 15px 20px;
  }
}

@media screen and (max-width: $sm) {
  ion-card {
    padding: 15px 15px 10px 15px;
  }
}
