/* Radio Speakers Grid - Structural CSS Only */
.radio-speakers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(566px, 1fr));
    gap: 2rem;
    width: 100%;
}

.speaker-item {
    display: flex;
    flex-direction: column;
    position: relative;
	border-radius: 150px 0 150px 0;
}
.speaker-item:nth-of-type(even) {border-radius: 0 150px 0 150px;}
.speaker-image {
    width: 100%;
    position: relative;
}

.speaker-image img {
    width: 100%;
    height: auto;
    display: block;
	border-radius: 150px 0 150px 0;
}

.speaker-item:nth-of-type(even) .speaker-image img {border-radius: 0 150px 0 150px;}

.speaker-name {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    width: 90%;
    background-color: #fec914;
    color: #7d179f;
    padding: 2rem 1.5rem;
    text-align: center;
	border-radius: 0 0 150px 0;
}

.speaker-name ul {margin:0; padding:1rem 0; width: 100%; display: grid; grid-auto-flow: column; justify-content: start;}
.speaker-name ul li {margin:0; padding:0 1rem 0 0; color: #7d179f; font-size: 30px; font-weight: 800;}
.speaker-name ul li a {margin:0; padding:0; border-radius: 15px; width:50px; height:42px; background-color: #7d179f; color: transparent; font-size: 0; display: flex; justify-content: center; align-items: center;}
.speaker-name ul li a i {margin:0; padding:0; font-size: 32px; color: #fec914;}
.speaker-item:nth-of-type(even) .speaker-image .speaker-name {border-radius: 0 0 0 150px; left: auto; right:1rem; padding: 2rem 1.5rem 2rem 3rem;}




/* begin media for smartphone */
@media (min-width : 230px) and (max-width : 767px) {
	.radio-speakers-grid {grid-template-columns: repeat(auto-fill, minmax(100%, 1fr)); gap: 1rem;}
	
	.speaker-item {border-radius: 80px 0 80px 0;}
	.speaker-item:nth-of-type(even) {border-radius: 0 80px 0 80px;}
	.speaker-name {border-radius: 0 0 80px 0; padding: 1rem;}
	.speaker-item:nth-of-type(even) .speaker-image .speaker-name {border-radius: 0 0 0 80px; padding: 1rem;}	
	
	.speaker-name ul {padding:0; grid-auto-flow: dense; grid-template-columns:1fr 1fr 1fr 1fr; grid-column-gap: 0.5rem; justify-content: center;}
	.speaker-name ul li:first-of-type {width: 100%; padding-bottom: 1rem; white-space: nowrap; grid-column: 1 / span 4; font-size: 28px;}
	
	.speaker-image img {border-radius: 80px 0 80px 0;}
	.speaker-item:nth-of-type(even) .speaker-image img {border-radius: 0 80px 0 80px;}
	
	.speaker-name ul li {margin:0; padding:0 0 0 0.5rem; text-align: center;}
	.speaker-name ul li a {border-radius: 8px; width: 40px; height: 32px;}
	.speaker-name ul li a i {font-size: 22px;}

	
}