#methodologyv4-section {
  justify-content: center;
  display: flex;
  height: fit-content;
  padding-top: 40px;
  padding-bottom: 40px;
  position:relative;
}

#methodologyv4-section:before{
  width:50%;
  position:absolute;
  height:1px;
  background: #20344E;
  top:0;
  left:50%;
  content:" ";
  transform: translateX(-50%);
}

.methodologyv4-container {
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lists-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.title-container > h1 {
  color: #C1A575;
  font-family: Montserrat;
  font-size: 48px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin-bottom:40px;
}

.title-container > h2 { 
  margin-top:20px;
  margin-bottom:20px;
  font-size: 18px; 
  line-height: 21.94px;
  text-align: left; 
  font-family: var(--fontAlternative); 
  font-style: normal;
  font-weight: 400; 
}

.courses-button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.card-trail {
        background-color: var(--lpCardBackground);
        border-radius: 8px;
        border: solid 1px var(--PUCRSComplementaryLight);
        padding: 24px;
        /* flex: 33.3%; */
}

.card-trail > .card-heading {
          display: flex;
          flex-direction:row;
          align-items:center;
          gap: 16px;
          margin-bottom: 16px;

          h1 {
              margin: 0;
              line-height: 38px;
              color: var(--lightGray)
              font-family: var(--fontHeading);
              font-weight: 700;
              font-size: 24px;
              word-wrap: break-word;
              padding-top: 10px;
          }
}

.variant-grid .card-trail {
  background-color: #152233;
  border: 1px solid var(--PUCRS-Graduao-Primary-Lightest, #324C6F);
}

.trail-card-container{
  display:flex;
  flex-direction:row;
  gap:10px;
}

.variant-grid .trail-card-container {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:10px;
}

.variant-grid .methodologyv4-button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    grid-column: span 3;
    padding-top:35px;
}

@media (max-width: 824px) {
  .variant-grid .trail-card-container {
    grid-template-columns: 1fr 1fr;
  }

  .variant-grid .methodologyv4-button-container {
    grid-column: span 2;
  }
}

@media (max-width: 540px) {
  .variant-grid .trail-card-container {
    grid-template-columns: 1fr;
  }
  .variant-grid .methodologyv4-button-container {
    grid-column: span 1;
  }
}

.trail-card{
  display:flex;
  flex-direction:column;
  padding:16px;
  flex:1;
  gap:16px;
  background: #172537;
  border-radius: 16px;
  h1{
    margin: 0;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    color: #C1A575;
    font-family: var(--fontHeading);
    display: flex;
    align-items: center;
    gap: 8px;
  }
 
  p{
    margin: 0;
    font-size:16px;
    line-height: normal;
    color: #F9F6F1;
    font-family: var(--fontHeading);
    font-weight: 400;
    word-wrap: break-word; 
  }
}

.variant-grid .trail-card {
  background-color: #111C2A;
  border-radius: 8px;
  border: none;
  padding: 24px;
}

@media (max-width: 768px) {
  .title-container > h1 {
    font-size: 32px;
  }

  #courses-button {
    width: 100%;
  }

  .trail-card-container{
    flex-direction:column;
  }
}