@layer components;

/* =================== BASIC MODULE GRID =================== */

.alpha_nova-basic-module-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;             
  gap: var(--spacing-7);                          
  padding-top: 1em;
}

.alpha_nova-basic-module {
  margin: var(--spacing-12) 0;                     
  width: 50%;                                  
}

/* =================== BASIC MODULE CARD =================== */

.basic-module__content {
  padding: var(--spacing-4);                      
  box-shadow: var(--box-shadow);
  background-color: var(--white);
  border-radius: var(--radius-md);
  transition: box-shadow var(--transition-medium);
}

.basic-module__content:hover {
  box-shadow: var(--box-shadow-hover);
}

/* image block */
.basic-module__img {
  width: 100%;
  aspect-ratio: 3/2;
  max-height: 250px;                           
  background-size: cover;
  background-position: center center;
  border-radius: var(--radius-sm);
}

/* text sections */
.basic-module__title {
    margin: var(--spacing-6) 0 var(--spacing-4);    
}

.basic-module__link {
    margin: var(--spacing-4) 0 var(--spacing-4);             
}

.basic-module__text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
}

/* link button */
.basic-module__link,
.basic-module__link:visited {
  display: inline-block;
  border: 1px solid var(--primary-color-20);
  color: var(--primary-color);
  border-radius: 10em;
  padding: .25em 1.5em;
  font-size: .8rem;
  margin: var(--spacing-4) 0 var(--spacing-4);   
  text-decoration: none;
  transition: all var(--transition-fast);
}

.basic-module__link:hover {
  background-color: var(--primary-color);
  color: var(--white);
}

/* =================== RESPONSIVE DOWN =================== */

/* tablet & mobile: 1 column layout */
@media (max-width: 550px) {
  .alpha_nova-basic-module-grid {
    grid-template-columns: 1fr;
  }
  .alpha_nova-basic-module {
    width: 100%;
  }
  .basic-module__img {
    max-height: 200px;
  }
}

 /* end @layer components */