.marketplace-section{ margin-bottom:20px; } .marketplace-section .button.next{ border: 1px solid #3d4346; color: #016496; font-family: "Open Sans", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; margin: 20px 0; font-size: 0.9rem; font-weight: 600; } .marketplace-section-header{ display:flex; justify-content: space-between; align-items: flex-end; border-bottom: 2px solid #e0e0e0; } .marketplace-section-title, .marketplace-section-title > a{ font-family: "Montserrat", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; font-size: 20px; font-weight: bold; } .marketplace-section-ad{ font-size: 20px; text-align: center; font-weight: bold; display: block; align-items: end; } .marketplace-section-ad > p{ display: none; } .marketplace-section-ad > span{ font-size: 12px; font-weight: normal; } .marketplace-section-ad > img{ margin:0; margin-bottom:2px; display: block; border:1px solid #e2e2e2; } .marketplace-row{ border-radius: 5px; display:flex; flex-direction: row; /*justify-content: space-evenly;*/ } .marketplace-row-item-wrapper{ width:100%; margin:10px; } .marketplace-row-item{ background: #fcfcfc; border: 1px solid #efefef; /*box-shadow: 1px 1px 10px #AEAEAE;*/ border-radius: 5px; overflow:hidden; height:100%; display: flex; flex-direction: column; align-items: stretch; } .marketplace-row-item-text { display: flex; flex-direction: column; height:100%; } .marketplace-row-item-image-wrapper{ position:relative; } .marketplace-row-item-image-wrapper > img{ max-width:100%; } .marketplace-row-item-image-wrapper > .rank{ position: absolute; top:0; left:0; background: black; padding: 5px; color:white; } .marketplace-row-item-title{ font-family: "Merriweather", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;; font-size:16px; font-weight:bold; padding:0 10px; } .marketplace-row-item-tag{ margin: 5px 0; padding:0 10px; } .marketplace-row-item-description{ font-size:0.875rem; padding-left:10px; padding-right:10px; padding-bottom:10px; flex-grow:1; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; } .marketplace-row-item-date{ font-size:0.8125rem; padding-left:10px; padding-right:10px; padding-bottom:10px; font-family: "Open Sans", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; } .marketplace-divider{ margin:40px 0; } @media (min-width:700px) { .marketplace-row-item-wrapper:first-of-type{ margin-left:0; } .marketplace-row-item-wrapper:last-of-type{ margin-right:0; } .marketplace-row-item-wrapper:first-child:nth-last-child(1), .marketplace-row-item-wrapper:first-child:nth-last-child(2), .marketplace-row-item-wrapper:first-child:nth-last-child(2) ~ .marketplace-row-item-wrapper, .marketplace-row-item-wrapper:first-child:nth-last-child(3), .marketplace-row-item-wrapper:first-child:nth-last-child(3) ~ .marketplace-row-item-wrapper { max-width:33%; justify-content: start; } .marketplace-row-item-wrapper:first-child:nth-last-child(4), .marketplace-row-item-wrapper:first-child:nth-last-child(4) ~ .marketplace-row-item-wrapper { max-width:25%; } } @media (max-width:700px) { .marketplace-row{ flex-direction: column; } .marketplace-section-header{ /*flex-direction: column;*/ /*text-align: center;*/ /*align-content: center;*/ justify-content: center; } .marketplace-divider{ margin:20px 0; } .marketplace-section-button-wrapper{ justify-content: center; } .marketplace-row-item-wrapper{ max-width:100%; } }