header {
  display: grid;
  grid-template-columns: 0.7fr 0.3fr;
}

h5 {
  font-size: 2.1rem;
  margin: 0 0 var(--standard-vertical-spacing-between-sections) 0;
}

.upfold {
  position: relative;
  z-index: 0;
  background-color: var(--brand-red);
  padding: 5rem var(--page-padding-value) 0;
  border-bottom-right-radius: var(--card-radius);
  border-bottom-left-radius: var(--card-radius);
  height: 40rem;
  margin-bottom: -17rem;
  overflow: hidden;

  .pattern {
    pointer-events: none;
    z-index: 0;
    position: absolute;
    left: 0%;
    top: 0;
    width: 100%;
    height: 100%;
    color: var(--brand-red);
    filter: brightness(30%);
    background-image: url('../../assets/revised-assets/pattern.svg');
    background-repeat: repeat;
    background-size: contain;
  }

  &>* {
    position: relative;
    z-index: 0;
  }

  h5 {
    color: var(--brand-cream-light);
  }
}

.notifications-button {
  transform: translateY(-1rem);
  position: relative;
  margin-left: auto;
  border-radius: 50%;
  background-color: var(--brand-cream-light);
  color: var(--brand-brown);
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;

  ion-icon {
    font-size: 1.7rem;
  }

  ion-badge {
    position: absolute;
    right: 0;
    top: 0;
    background-color: #79af2e;
    color: var(--brand-cream-light);
    border-radius: 50%;
    transform: translate(0.3rem, -0.3rem);
  }
}

.stories {
  list-style: none;
  width: calc(100% + var(--page-padding-value));
  overflow-x: auto;
  overflow-y: hidden;
  height: var(--stories-height);
  white-space: nowrap;
  margin: var(--standard-vertical-spacing-between-sections) 0;

  li {
    display: inline-block;
    margin-right: 2rem;
    height: 100%;

    span {
      text-align: center;
      display: block;
      color: var(--brand-cream-light);
      font-size: 1.3rem;
      margin-top: 1rem;
    }

    img {
      width: calc(var(--stories-height) - 2.5rem);
      height: calc(var(--stories-height) - 2.5rem);
      border-radius: 50%;
      overflow: hidden;
      object-fit: cover;
      display: block;
      object-position: center;
    }
  }
}

.page-details {
  padding: 0 var(--page-padding-value);
}

.action-card {
  min-height: 20rem;
  box-shadow: 0rem 1.2rem 1rem -0.8rem #cecece;
  padding: 0 var(--standard-vertical-spacing-between-sections);
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 0.5fr 0.5fr;
  border-radius: var(--card-radius);
  position: relative;
  overflow: hidden;
  background-color: var(--brand-cream);
  margin: var(--standard-vertical-spacing-between-sections) 0;

  .container {
    align-self: center;
  }

  .icon {
    ion-icon {
      width: 100%;
      height: 100%;
    }
  }
  
  h5, p {
    color: var(--brand-brown);
    margin-bottom: var(--standard-vertical-spacing-between-sections);
  }

  p {
    font-size: 1.75rem;
  }

  button {
    background-color: transparent;
    border: 0.15rem solid var(--brand-red-light);
    color: var(--brand-red-light);
    font-size: 1.3rem;
    border-radius: 2rem;
    font-family: 'charter-bold';
    padding: 0.3rem 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;

    ion-icon {
      margin: 0.5rem;
      font-size: 1.1rem;
    }
  }
}

.card-collections {
  padding-top: 2rem;
  header {
    align-items: center;    
    
    h5 {
      margin: 0;
      color: var(--brand-brown);
    }
    
    a {
      font-family: 'charter-regular';
      text-align: right;
      text-decoration: none;
      font-size: 1.6rem;
      background-color: transparent;
      color: var(--brand-red);
      font-weight: 600;
    }
  }
}

.horizontal-card-list {
  list-style: none;
  width: calc(100% + 2rem);
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  padding: var(--standard-vertical-spacing-between-sections);
  margin: var(--standard-vertical-spacing-between-sections) 0;
  margin-left: -var(--standard-vertical-spacing-between-sections);

  li {
    display: inline-block;
    margin-right: 2rem;
    position: relative;

    &::before {
      content: '';
      width: 90%;
      height: 100%;
      left: 5%;
      position: absolute;
      top: -1rem;
      background-color: var(--brand-red);
      opacity: 0.1;
      border-radius: var(--card-radius);
    }

    &::after {
      content: '';
      width: 100%;
      height: 100%;
      left: 0;
      position: absolute;
      top: 0rem;
      background-color: var(--brand-red);
      opacity: 0.2;
      border-radius: var(--card-radius);
      z-index: 1;
    }
  }

  figure {
    position: relative;
    z-index: 0;
    width: 15rem;
    height: 20rem;

    img {
      border-radius: var(--card-radius);
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
  }
}