/* Libraries page styles.
   	@file        libraries.css.en
	developer:   yhechler
   	requires:    /common/framework/css/framework.es.css  
========================================================================== */
:root {
    --wrapper-h-pad: 3.125rem;
}
body {
    font-family: 'Source Sans Pro', Arial, sans-serif;
}
.page-width {
    margin: 3.125rem auto;
    max-width: 1200px;
    padding: 0 3.125rem;
    width: 100%;
}
main .header h1 {
    color: #dd1100;
    font-size: 45px;
    font-weight: 400;
    line-height: 54px;
    margin: 2rem auto;
}
main .header p {
    font-size: 21px;
    color: #535353;
    line-height: 1.5;
    font-weight: 300;
}
main .header p a {
    color: #e00400;
}
main .header p a:hover {
    color: #f57300;
}
main h2 {
    color: #dd1100;
    font-size: 30px;
    font-weight: 400;
    margin: 2rem auto 0.5rem auto;
}
.header h2 {
    color: #dd1100;
    font-size: 45px;
    font-weight: 400;
    line-height: 54px;
    margin: 0;
    border-bottom: 1px solid #ccc;
}
main p.intro {
    margin: 20px 0 0 0;
    color: #535353;
    font-size: 21px;
    font-weight: 300;
    line-height: 32px;
}
/* ==================================================
   libraries-list
==================================================== */
.cell-wrapper {
  display: grid; /* Grid layout for the main container */
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 20px;
  border-top: 1px solid #e4e4e4;
}
/* Individual grid item */
.cell > a, .cell .pod-link.no-cursor {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 15px;
}

.link-icon {
	flex-shrink: 0;
}
/* Details container */
  .link-details {
    display: flex;
    flex-direction: column;
 }
.link-details.see-also {
    color: #393939;
    font-weight: 600;
    padding-top: 13px;
}
.link-details.see-also h3 {
    color: #e00400;
}
/* New tag */
.new-tag {
    font-size: 1.02rem;
    color: #ff7700;
    text-transform: uppercase;
    font-style: italic;	
}
.link-details h3 {
    margin: 0 0 8px 0;
    color: #393939;
    font-size: 20px;
    line-height: 24px;
    font-weight: 400;
}
.link-details .detail-description {
    margin: 0 0 8px 0;
    color: #737373;
    font-size: 14px;
    line-height: 18px;
}

/* Price */

.pod-detail .detail-author, .pod-detail .detail-price {
    display: block;
    color: #393939;
    font-size: 14px;
    line-height: 18px;
    font-weight: 600;
}
.pod-detail .detail-price {
    margin: 0;
    color: #e00400;
    font-weight: 600;
	font-size: 1rem;
}
.cell a:hover .pod-detail .detail-price {
    color: #f57300;
}

.link-details .detail-description a:link,
.link-details .detail-description a:visited {
    color: #dd1100;
}

.link-details .detail-description a:hover,
.link-details .detail-description a:active {
    color: #f57300;
}

.link-details .detail-description {
    display: block;
    margin: 0 0 8px 0;
    color: #737373;
    font-size: 14px;
    line-height: 18px;
}
/* ==============================================================
   responsive breakpoint styles
   ============================================================== */
@media (max-width: 1200px) {}
@media (max-width: 900px) {
	.cell-wrapper {
	  grid-template-columns: 1fr;
	  border-top:none;
	  padding: 0;
	  gap: 0;
	}
	.cell {
  		border-top: 1px solid #e4e4e4;
	}
}
@media (max-width: 600px) {}
@media (max-width: 320px) {
	.cell > a, .cell .pod-link.no-cursor {
		display: grid;
		align-items: center;
		/* gap: 0; */
		padding: 15px 0;
	}
}